Vue.js 2 - 하나의 애플리케이션/인스턴스 Vue에서 다른 애플리케이션/인스턴스 Vue로 $emit 이벤트를 발생시키는 방법

Vue.js 2 - 하나의 애플리케이션/인스턴스 Vue에서 다른 애플리케이션/인스턴스 Vue로 $emit 이벤트를 발생시키는 방법

싱글 파일 컴포넌트와 함께 웹 팩을 사용합니다.

메뉴 헤더에 Cart Shopping 드롭다운을 표시하는 Vue 인스턴스가 1개 있습니다.

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하고 싶다: 카탈로그가 변경되면 ShoppingCart에서 함수를 호출하고 싶다.

event Hub를 테스트합니다.

import Vue from 'vue';

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

따라서 각 인스턴스의 이벤트를 Import합니다.

import eventHub from './events/eventHub';

카탈로그:

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

쇼핑 카트:

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

하지만 이건 안 먹힐 거야$on과 $emit이 Vue의 동일한 인스턴스에 있는 경우에만 작동합니다.

웹 팩으로 2개의 모듈이 생성되고 2개의 인스턴스 간에 변수를 공유할 수 없습니다.

웹 팩을 사용하여 여러 인스턴스와 함께 글로벌 변수를 가질 수 있는 아이디어가 있습니까?

이 셋업은 기능합니다.main.js진입점입니다.

bus.filename(버스.filename)

import Vue from "vue"

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

main.discloss.main.discloss.

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창문에 걸어봐.

webpack.config.syslog

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

bus.filename(버스.filename)

import Vue from "vue"

window.bus = new Vue();

main.discloss.main.discloss.

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

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

메인2.124

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에만 Import 됩니다.main2.js에서의 사용을 보호해야 합니다.App.vue존재하지 않을 가능성이 있는 경우(그것은 로만 Import되기 때문에)main2.js).

언급URL : https://stackoverflow.com/questions/42838936/vue-js-2-how-to-emit-event-from-one-application-instance-vue-to-an-other