Vue.js 2 - 如何$从一个应用程序/实例Vue向另一个发出事件？

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}
});

我想$ $从一个实例发出一个事件到另一个实例:当Catalog更改时,我想在ShoppingCart中调用一个函数.

我测试eventHub:

import Vue from 'vue';

var eventHub = new Vue();
export default eventHub; 

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

import eventHub from './events/eventHub';

在目录中:

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

在ShoppingCart中:

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

但这不会奏效.它仅在$ on和$ emit与Vue的同一实例中有效.

我认为webpack创建了2个模块,我不能在我的2个实例之间共享变量.

任何人都有想法让webpack包含多个实例的全局变量？

Answer 1

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

bus.js

import Vue from "vue"

const bus = new Vue();
export default bus;

main.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)
})

应用程序

<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>

发表评论编辑

要跨入口点进行通信，可以bus在窗口上显示Vue。

webpack.config.js

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

bus.js

import Vue from "vue"

window.bus = new Vue();

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

main2.js

import Vue from 'vue'
import App2 from './App2.vue'
import bus from "./bus"

new Vue({
  el:"#app2",
  render: h => h(App2)
})

应用程序

<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），您需要谨慎使用。