vue组建通信的几种方式

一、父组件 ===》 子组件

1、props

父组件：

<HelloWorld msg="Welcome to Your Vue.js App"/>

子组件：

props:{msg:String}

2、refs

父组件：

<HelloWorld ref="hw"/>

调用子元素的方法以及属性 this.$refs.hw.xx=xxx

3、子元素children

父组件：

<HelloWorld />

调用第一个子元素的方法以及属性 this.$children[0].xx=xxx

注： 当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

二、子组件 ===》 父组件

（观察者模式） 子组件：

this.$emit('test',data)

父组件：

<HelloWorld @test="testFun($event)"/>

三、兄弟组件：通过共同祖辈组件

通过共同祖辈组件$parent或者$root 兄弟组件1：

this.$parent.$emit('test')

兄弟组件2：

this.$parent.$on('test',handle)

四、祖先和后代之间

使用props传递层级较多，使用provide 和 inject 类型： provide：Object | () => Object inject：Array | { [key: string]: string | Symbol | Object }

// 父级组件提供 'foo' provide: { foo: 'bar' } // 或者： provide()=> { // foo: 'bar' // } // 子组件注入 'foo' inject: ['foo'], created () { console.log(this.foo) // => "bar" }

注意： provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。

四、任意两个组件之间

事件总线或VUX

1、事件总线：创建一个Bus类负责事件派发，监听和回调管理

//bus.js import Vue from 'vue'; // 使用 Event Bus const bus = new Vue(); export default bus; //子组件1 import bus from '@/utils/bus'; bus.$emit('collapse-content', msg); //子组件2 import bus from '@/utils/bus'; bus.$on('collapse-content', msg => { this.collapse = msg; });

2、vuex