vue 实例（app1）调用另一个 vue 实例（app2）的最佳方式

Question

例子：

    <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”按钮，类似于上一个问题中使用的...

Answer 1

每个 Vue 实例都实现一个事件接口。这意味着要在两个 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。