在组件的通信上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接收属性触发方法。