美文网首页前端开发
Vue父子组件间通信(数据传递)

Vue父子组件间通信(数据传递)

作者: Spinach | 来源:发表于2020-07-16 16:13 被阅读0次

父---props--->子
子---props/自定义事件/全局事件总线/消息订阅与发布--->父
任意组件间通信:/自定义事件/全局事件总线/消息订阅与发布/Vuex/路由传参

一、父传子

数据传递

父组件传递:在使用子组件时,使用v-bind:自定义接收名称="要传递的数据"
子组件接收:props:["自定义接收名称"]

方法传递

父组件传递:v-on:自定义接收名称="要传递的方法"
子组件接收时自定义一个方法,在方法中触发父组件传递的方法:this.$emit("自定义接收名称")

二、子传父

数据传递

在父组件向子组件传递方法的基础上,给方法增加参数
也就是在子组件中触发父组件的方法时:this.$emit("自定义接收名称",需传递的数据),父组件中的方法也增加参数接收数据即可。

父组件调用子组件中的方法

在父组件中使用子组件时,增加ref属性并指定ref的名称,然后在调用方法的地方使用this.refs.ref的名称.需调用的子组件方法名()即可调用。
e.g.

//父组件中
//<子组件 ref='ref的名称></子组件>
<son ref='refName'></son>
//子组件中
methods:{
  sonFn(){
    alert('子组件中的方法')
  }
}
//父组件中
methods:{
  faFn(){
    //正常调用faFn()方法即可
    this.refs.refName.sonFn()
  }
}

相关文章

  • Vue如何实现组件通信?

    Vue组件通信的三种情况: 父子通信 爷孙通信 兄弟通信 父子通信:父组件使用Prop向子组件传递数据,子组件通过...

  • Vue的组件通信

    Vue的父子通信问题 参考文档 : Vue 组件组合 使用 props传递数据 用v-on 绑定事件 原理: 父子...

  • vue.js系列三:组件间通信

    1.组件间通信基本原则 2.vue 组件间通信方式 2.1组件间通信 1: props(适用于父子组件传递属性) ...

  • vue组件间通信

    vue组件间通信 1.父组件向子组件传递数据--props 在vue2.0中使用props实现向子组件传递数据: ...

  • vue组件如何通信?有几种方式?

    在vue中组件通讯可以分为父子组件通讯和非父子组件通信。父组件通过props的方式向子组件传递数据,而子组件可以通...

  • vue第七节

    Vue里组件的通信 通信:传参、控制(A操控B做一个事件)、数据共享 模式:父子组件间、非父子组件 父组件可以将一...

  • vue组件间通信的一些实用方法(VUE2.x)

    vue组件间通信的一些实用方法(VUE2.x) 一、父子组件间通信 常用的父子组件通信方法,一般涉及props和$...

  • 前端mvvm框架vue.js(3)——父子组件通信

    vue.js父子组件通信:1,父组件向子组件传递数据,通过props,注意数据绑定是单向的(借鉴了react);2...

  • Vue2 组件通信写法总结

    组件通讯包括:父子组件间的通信和兄弟组件间的通信。具体有以下几种情况。 父组件传递数据给子组件 父组件使用 Pro...

  • vue组件传参

    父子组件通信 1、父组件给子组件传递数据,请查看下面这篇文章vue中的prop2、子组件给父组件传递数据(一般不推...

网友评论

    本文标题:Vue父子组件间通信(数据传递)

    本文链接:https://www.haomeiwen.com/subject/wdnphktx.html