Vue.js 2 - 如何将事件从一个应用程序/实例 Vue $emit到另一个应用程序/实例?

Question

我使用带有单个文件组件的webpack。

我的菜单标题中有 1 个 Vue 实例来显示购物车购物下拉菜单：

import Vue from 'vue';
import App from './AppShoppingCart.vue';
new Vue({
el: '#shoppingCartApp',
template: '<App/>',
components: {App}
});

我在同一页面中有一个其他 Vue 实例(包含产品的目录)：

import Vue from 'vue';
import App from './AppCatalog.vue';
new Vue({
el: '#catalogApp',
template: '<App/>',
components: {App}
});

我想将事件从一个实例$emit到另一个实例： 当目录更改时，我想在购物车中调用一个函数。

我测试事件中心：

import Vue from 'vue';
var eventHub = new Vue();
export default eventHub; 

所以我在每个实例上导入事件：

import eventHub from './events/eventHub';

在目录中 ：

eventHub.$emit( "actproductslist-changed" );

在购物车中 ：

eventHub.$on('actproductslist-changed', function(){ alert('AppShoppingCart') } );

但这行不通。仅当 $on 和 $emit 位于 Vue 的同一实例中时，它才有效。

我认为 webpack 创建了 2 个模块，我无法在我的 2 个实例之间共享变量。

任何人都有想法使用webpack拥有具有多个实例的全局变量吗？

Answer 1

此设置有效，其中main.js是您的入口点。

巴士.js

import Vue from "vue"
const bus = new Vue();
export default bus;

主.js

import Vue from 'vue'
import App from './App.vue'
import App2 from './App2.vue'
new Vue({
el: '#app',
render: h => h(App)
})
new Vue({
el:"#app2",
render: h => h(App2)
})

App.vue

<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
import Vue from "vue"
import bus from "./bus"
export default {
methods:{
sendMessage(){
bus.$emit("testing")
}
}    
}
</script>

App2.vue

<template></template>
<script>
import Vue from "vue"
import bus from "./bus"
export default {
mounted(){
bus.$on("testing", ()=> alert("message received"));
}
}
</script>

帖子评论编辑

要跨入口点进行通信，您可以在窗口上公开busVue。

webpack.config.js

entry: {
"main": './src/main.js', 
"main2": './src/main2.js'
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: '[name].js'
},

巴士.js

import Vue from "vue"
window.bus = new Vue();

主.js

import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})

主2.js

import Vue from 'vue'
import App2 from './App2.vue'
import bus from "./bus"
new Vue({
el:"#app2",
render: h => h(App2)
})

App.vue

<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
import Vue from "vue"
export default {
methods:{
sendMessage(){
if (bus)
bus.$emit("testing")
}
}    
}
</script>

App2.vue

<template></template>
<script>
import Vue from "vue"
export default {
mounted(){
bus.$on("testing", ()=> alert("message received"));
}
}
</script>

请注意，由于bus仅在main2.js中导入，因此您需要在App.vue中保护它的使用，以防它可能不存在(因为它仅在main2.js中导入)。