【求助】vue 2.0 使用$emit和$on派发、监听事件,没有反应?或者使用vuex如何实现监听效果?
发布于 2年前 作者 guanzhihong 617 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

A组件:

<script type="text/ecmascript-6"> import Vue from 'vue'; export default { data () { return { // 通过单独的事件中心管理组件间的通信 eventHub : new Vue() }; }, methods : { addcart (event) { this.eventHub.$emit('cart-add', event.target); } } } </script> B父组件中如何监听,求助? <script type="text/ecmascript-6"> import Vue from 'vue'; import A from '@/components/cartcontrol/A.vue'; let eventHub = new Vue(); export default { created () { eventHub.$on('cart-add', (target) => { console.log(target); this._drop(target); }); } } </script>
4 回复

你想让每个人看的都自己格式化一下代码吗?

不好意思,这个里边不知道怎么不能格式化,第一次在这个社区求助提问,望大神见谅。

A组件:

<script type="text/ecmascript-6">
import Vue from 'vue';
export default {
data () {
return {
// 通过单独的事件中心管理组件间的通信
eventHub : new Vue()
};
},
methods : {
addcart (event) {
this.eventHub.$emit('cart-add', event.target);
}
}
}
</script>
B父组件中如何监听,求助?
<script type="text/ecmascript-6">
import Vue from 'vue';
import A from '@/components/cartcontrol/A.vue';
let eventHub = new Vue();
export default {
created () {
eventHub.$on('cart-add', (target) => {
console.log(target);
this._drop(target);
});
}
}
</script>

你是通过new vue()派发事件吗,如果项目小不推荐用vuex

$emit 和 $on 适用于父组件和子组件之间的通讯,具体用于子组件想向父组件传递消息时。具体使用方法楼主就去看文档吧。(点这里)[https://cn.vuejs.org/v2/guide/components.html#自定义事件] 如果想实现非父子组件之间的通讯,可以使用 new vue() 派发。这个方法文档也有说明。(点这里)[https://cn.vuejs.org/v2/guide/components.html#非父子组件通信] 如果项目比较复杂可以使用 vuex,可以简单的把 vuex 看做是一个存储全局变量的地方(方然它和全局属性不一样,比如vuex会自动处理数据的变化),组件可以通过 watch 来监听 vuex 里面的属性做相应的处理。

回到顶部