如何让一个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”按钮{{link1：在此代码中}}类似于{{link2：上一个问题}}中使用的...

- Peter Krauss

---

"call APP1" 的意思是什么？ - acdcjunior

嗨@acdcjunior，抱歉需要更好的解释，但具体示例显示了问题。好吧...假设第一个按钮“运行APP1”正在工作，因此我需要第二个“运行APP1”执行完全相同的操作。如果我只是复制/粘贴（如图所示），它不起作用。 - Peter Krauss

这就是它吗？https://jsfiddle.net/acdcjunior/sLfoxak5/7/ 如果不是，它是否接近？在这个 fiddle 中，app1 是一个自定义组件，它会发出一个 go-modal 事件，而父组件则通过获取事件发送的数据并将其分配给父组件数据来对该事件做出反应。 - acdcjunior

嗨@acdcjunior，是的，看起来emit可以实现这个功能（指的是guide-emit？不在guide-event中）...但我不想把所有简单的div APP都重做成一个新的模板，我只需要调用，只需要两个Vue实例之间的通信（app2调用app1）。 - Peter Krauss

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演示。

- acdcjunior