vue组件通信

组件间的通信

1. 父组件向子组件传值

在父组件中以标签的形式引入子组件，通过prop向下传递数据:
父组件向子组件传递数据：
子组件接收父组件数据：

Tips: 子组件props接收数据的三种方式
1. props: [‘dataFromParent’]
2. props: { dataFromParent: Array } //这样可以指定传入类型，如果类型不对，会抛出警告
3. props: {dataFromParent: {type: Array,default: [0, 0, 0]} } //指定默认值

2.子组件向父组件传值

父组件在使用子组件的地方使用v-on监听自定义的事件，子组件通过this.$emit触发事件
父组件：

子组件：

3.非父子组件间的数据传递eventBus

在需要相互通信的同级组件或隔级组件引入一个新的vue实例，然后通过分别调用这个的事件触发和监听来实现通信和参数传递
新建一个eventBus.js文件,创建一个新的vue实例

// eventBus.js

import Vue from 'vue'
export const EventBus = new Vue()

发送事件：

接收事件：

移除事件——可以通过**EventBus.$off(‘dataFromFirChild’)**移除所有对此事件的监听，不加任何参数时，移除所有事件频道

另外一种方式，可以在main.js初始化一个全局eventBus

// main.js

//通过 this.$bus.$emit('xxx', data)来发布事件，通过this.$bus.$on来订阅事件
Vue.prototype.$bus = new Vue()

4.vuex

在中大型项目开发中，推荐使用vuex进行数据通信：Vuex的基本使用

参考：
Vue 2.0学习笔记：事件总线（EventBus）
Vue组件通信中eventBus的使用