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 ？

我需要两个按钮＆＃34;运行APP1＆＃34;做同样的事情。假设在插图中，第一个是工作，第二个是复制/粘贴...但第二个不起作用，因为是在app2。

具体案例：见＆＃34; GOOD1＆＃34;和＆＃34; GOOD2＆＃34;按钮at this code类似于last question ...

中使用的按钮

Answer 1

每个Vue实例都实现events interface。这意味着要在两个Vue实例（app1和app2）之间进行通信，您可以使用Custom Events。

因此，在您的示例中，在任何事情之前，给第一个实例（将发出事件）一个名称，以便其他实例可以引用它：

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

请参阅demo JSFiddle here。

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

1 个答案: