父子组件之间的通信

133 阅读1分钟

1、props & $emit

父向子传递数据,props
子向父传递数据,$emit 

2、ref & $refs

子传父:父调用子中的方法,子组件中添加ref,父组件通过this.$refs.methos调用,可以获取子组件的属性值或者函数

如果在普通的DOM元素上使用,引用指向DOM元素,如果在子组件上,引用指向组件实例

3、parent  &children

子传父:父组件通过this.$children[i].paramsName 获取子组件的属性值或函数   
父传子:子组件通过this.$parent[i].paramsName获取父组件的属性值或函数

4、兄弟之间的传值 vuex

5、attrs  &listeners

父传子:$attrs,子通过$attrs.name等来接收
子传父:$listeners,子通过$listeners.change触发方法同时可以向父传值

5、eventBus 事件总线

main.js中Vue.prototype.$bus = new Vue(),父组件可以通过this.$bus.$on订阅一个事件,子组件和孙组件可以通过this.$bus.$emit触发这个事件同时可以传值

跨级通信:
eventBus 、vuex 、provide/inject 、 attrs/listeners