VueJS组件通讯

Posted 2021-05-01 技术漫步者

关于vue组件之间数据通讯，可以使用vuex做大规模状态管理。不过很多时候，当我们的应用量级较低时，可以不引入vuex。 

组件通讯一般分为三类：

1. 父组件向子组件通讯

2. 子组件向父组件通讯

3. 兄弟组件之间通讯

父组件向子组件通讯

父组件向子组件传递数据，是通过props属性实现。

子组件在props中创建一个属性，接收父组件传递过来的值。

父组件注册子组件后，以标签形式调用子组件，此时在子组件标签中添加子组件props中创建的属性，属性的属性值即为父组件传给子组件的值。

这里我们实现一个demo，首先创建一个组件Child.vue作为子组件。

接着在App.vue中引入Child.vue，并注册。在template中，添加子组件child标签，添加message属性。

子组件向父组件通讯

子组件向父组件传值，主要通过$emit实现。

子组件通过某些操作方式（如点击等）触发一个自定义事件。在自定义事件中，将需要传给父组件的值作为作为$emit的第二个参数。

父组件中注册子组件，并在子组件标签上绑定对自定义事件的监听。

我们在刚刚的demo中继续测试下，首先在Child.vue中创建一个按钮，触发点击事件，从而使用$emit触发一个自定义方法，并传递一个参数。

接着在App.vue中，child标签中监听该自定义事件并添加一个响应该事件的处理方法。

兄弟组件之间通讯

兄弟组件间通讯，利用创建一个eventBus作为事件总线的中间介质，再使用

$emit和$on传参。

首先，我们创建一个事件总线，作为通讯桥梁。

在需要传值的组件中用bus.$emit触发一个自定义事件，并传递参数。

在需要接收数据的组件中用bus.$on监听自定义事件，并在回调函数中处理传递过来的参数。

接下来，我们继续在demo测试下。

首先，我们创建一个eventBus.js，eventBus.js中创建了一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。

创建组件1，引入eventBus，添加一个按钮并绑定点击事件。在响应点击事件的sendMsg函数中用$emit触发了一个自定义的customerEvent事件，并传递了一个字符串参数。

创建组件2，引入eventBus，在mounted中，监听了customerEvent,并把传递过来的字符串参数传递给了$on监听器的回调函数。

在父组件App.vue中，引入这两个子组件，并添加标签。

用一个Vue实例来作为中央事件总线来管理组件通信的方法，只适用于通信需求简单一点的项目，对于更复杂的情况，可以使用Vuex来进行处理。