vue 인스턴스(app1)에 대한 가장 좋은 방법은 다른 vue 인스턴스(app2)를 호출하는 것입니다.

vue 인스턴스(app1)에 대한 가장 좋은 방법은 다른 vue 인스턴스(app2)를 호출하는 것입니다.

예:

    <div id="app1">  <button @click="etc...">run APP1</button> ..</div>

    <div id="app2">...   
      <button @click...>run APP1</button><!-- HERE! need a reference--> ...
      <button @click...>run APP2</button> 
    </div>

APP2의 Vue에게 APP1에 전화해야 한다고 어떻게 말합니까?

두 버튼 모두 "APP1 실행"이 정확히 동일한 기능을 수행하도록 해야 합니다.그림에서 첫 번째가 작동하고 두 번째가 복사/붙여넣기라고 가정하면...하지만 두 번째는 app2에 빠져있기 때문에 작동하지 않습니다.

구체적인 사례: 마지막 질문에서 사용한 것과 마찬가지로 이 코드의 "GOOD1" 및 "GOOD2" 버튼을 참조하십시오.

모든 Vue 인스턴스는 이벤트인터페이스를 실장합니다.즉, 2개의 Vue 인스턴스 간에 통신합니다(app1그리고.app2커스텀 이벤트를 사용할 수 있습니다.

따라서 이 예에서는 다른 인스턴스가 참조할 수 있도록 첫 번째 인스턴스(이벤트를 내보내는 인스턴스)에 이름을 지정합니다.

var app1 = new Vue({
  el: '#app1'
})

그리고 거기서 이벤트를 내보냅니다(이 코드는app1의 템플릿):

  <button @click="$emit('go-modal', {header: 'HEL<big>LO2</big>', showModal: true})">GOOD1</button>

  <button @click="$emit('go-modal', {header: 'BYE2', showModal: true})">GOOD2</button>

두 번째 예에서는 (app2)를 사용하여 이러한 이벤트를 재생합니다.$on:

new Vue({
  el: '#app2',
  // ...
  mounted() {
    app1.$on('go-modal', this.handleApp1);
  },
  methods: {
    handleApp1(data) {
      this.header = data.header;
      this.showModal = data.showModal;
    }
  }
})

여기에서 데모 JSFiddle을 참조하십시오.

언급URL : https://stackoverflow.com/questions/49203490/best-way-to-a-vue-instance-app1-call-another-vue-instance-app2