vue2.0 $emit $on组件通信
在vue1.0中父子组件通信使用$dispatch 和 $broadcast,但是在vue2.0中$dispatch 和 $broadcast 已经被弃用。
因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好,我们也不希望在以后让开发者们太痛苦。并且$dispatch
和 $broadcast
也没有解决兄弟组件间的通信问题。
复杂项目中状态管理可以用vuex,简单父子组件通信可以用$emit事件广播,用$on接收事件信息
子组件:
// 子组件 <template> <div @click="changeData(1)">点击改变数据</div> </template> <script> data () { return { type: 0, }, methods: { changeData (type) { this.type = type this.$emit('change-type', type) } } </script>
父组件:
//父组件 <template> <typetemplate @change-type="changeType"></typetemplate> </template> <script> data () { return { selectType: 0, }, methods: { changeType (type) { this.type = type } },
components: {
typetemplate
} </script>
@change-type 是v-on:change-type简写。
以上是 子组件与父组件 通信,跨级组件通信以及兄弟组件通信一样可以使用$emit $on。 因为 Vue 通过事件发射器接口执行实例,实际上你可以使用一个空的 Vue 实例。
var eventHub = new Vue(); // 这个空实例只做通信辅助用,可以理解为一个事件处理中心。
任意组件A:
eventHub.$emit('add',1);
任意组件B:
event.$on('add',(n) => { this.num += n; });
另外,一个简单的方法,可以在实例化Vue时,就在data塞入一个new Vue()
new Vue({ router: router, template: '<App/>', components: {App}, data: { eventHub: new Vue() } }).$mount('#app');
这样在其他地直接可以 this.$root.eventHub 访问到这个空实例
广播接收方法就直接可以用了:
// this.$root.eventHub 获取eventHub对象并调用$emit方法 this.$root.eventHub.$emit('add', 1);
其他组件可以调用$on或$off 来监听或解除广播事件
this.$root.eventHub.$on('add', (n)=>{ this.num += n; });