Vue之父子、同级组件的通信详解

在组件的通信上vue2.0弃用1.0中dispatch和broadcast的原因在于依赖组件树结构的事件流，当组件树变得很大时很难推理（简单地说：它不能在大型应用很好地扩展，我们不希望以后给你设置痛点）。dispatch和broadcast不能解决同级组件之间的通信。

2.0中有两种方法可以完成组件直接的通信，一种是vuex，适合大型项目的组件管理(比较复杂暂不写，以后会详解)。另一种是event.bus，这种方法适合不算特别复杂的组件管理，这里详解一下怎么用：

新建目录文件–>src/components/eventBus/eventBus.js，代码：

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

组件中引用：

import bus from '@/components/eventBus/eventBus';

下面介绍父组件与子组件、子组件与父组件、同级组件之间的通信方式：

一，子组件–>父组件，传递参数触发父组件的方法、子组件方法让父组件调用，同级组件通信与子组件–>父组件用法的方法一致。

1，子组件中传递参数触发父组件方法，可以将当前属性当做参数传到父组件，比如传当前的元素element：

（1）首先由子组件触发当前元素：

子组件children模板：

<div @cart-add="cartAdd"></div>

子组件js：

import bus from '@/components/eventBus/eventBus';
export default {
cartAdd () {
bus.$emit('cart-add', event.target);
}
};

（2）父组件parent模板在钩子函数中接收属性

父组件模板：

<div>
<children @cart-add="cartAdd"></children>
</div>

父组件js：

import bus from '@/components/eventBus/eventBus';
export default {
created () {
bus.$on('cart-add', (el) => {});
}
};

2，子组件方法让父组件调用

这里借用ref、refs的方法，子组件js：

export default {
methods: {
drop () {
}
}
};

父组件模板：

<div>
<div @click="btn"></div>
<children ref=cartAdd></children>
</div>

父组件js：

export default {
methods: {
btn () {
this.$refs.cartAdd.drop();
}
}
};

二，父组件–>子组件传值

父组件模板中绑定参数：

<div>
<children :parentData="datas"></children>
</div>

子组件接收数据,在模板中就可以调用父组件里的数据

子组件模板：

<div>{{parentData.name}}</div>

export default {
props: {
parentData: {
type: Object
}
}
};

三、兄弟组件通信

与子组件–>父组件的传递参数触发方法一致，在children1中emit传递属性，在children2中on接收属性触发方法。