Vue组件间的通信

  我们知道Vue开发是组件化的开发,那么组件化开发就绕不过组件间的通信这一点,以往在vue项目的开发之中

用vuex进行数据的集中处理,但这是对于大的项目来说,如果只是一个小的项目使用vuex就划不来了。所以这个时候

就需要组件间的通信了。

  组件间的通信主要有三个类别:

    1.父子组件的通信

    2.子与父组件的通信

    3.兄弟组件的通信

 

 

父子组件的通信

  父组件传递数据给子组件需要强制绑定一个属性给子组件的映射标签上,然后子组件可以通过props获得父组件传递过来的数据。

Parent.vue


Child.vue


 

 

子组件传递数据给父组件

  子组件触发事件,父组件监听事件做出数据改变。总结来说就是:父组件绑定自定义事件,子组件触发父组件的自定义事件并向其传递参数。

parent.vue



children.vue


 

兄弟组件间的通信

  这个时候需要我们定义一个空的Vue实例

bus.js

import Vue from 'vue'
export default new Vue()

a.vue



b.vue



通过$emit将事件和参数传递给b.vue

通过$on接收接收参数和相应事件

你可能感兴趣的:(Vue组件间的通信)