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

我想从一个实例向另一个实例发出一个事件：当目录发生变化时，我想在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)
})

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

发表评论编辑

要跨入口点进行通信，您可以在窗口中公开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)
})

<强> 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）。

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

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

1 个答案:

发表评论编辑