Html 鼠标悬停功能可参考不同的<；部门id>；在相同的Vue.js函数上

我在“.html”文件中定义了mouseover属性，其中有两个div id

<div id="app">
<img class="img-responsive img-full" v-bind:src="imgData" @mouseover="imgData = imgData_1">
</div>

<div id="app1">
<img class="img-responsive img-full" v-bind:src="imgData_c" @mouseover="imgData_c = imgData_a">
</div>

---

如果我将鼠标悬停在div id=“app”（第一个'div'）上的图像上，那么div id=“app1”（第二个'div'）上的图像是否会更改？

您可以在Vue实例中使用内置事件总线。侦听更改并在第三个Vue实例上发出事件。您只需确保您可以在两个应用程序中访问第三个Vue入口。以下是有关此功能的详细信息：

下面是一个关于如何使用此类EventBus的示例：

const EventBus=new Vue（）；
//订阅事件“some event”并添加处理程序函数
EventBus.$on（'some-event'，data=>{
log（'someevent'是通过event'调用的）；
控制台日志（数据）；
});
//实际发出带有一些有效负载的事件
EventBus.$emit（'some-event'，{test:123}）
您可以在
app1
中创建事件处理程序，并将其连接到
应用程序中的偶数。您也可以在此处使用指令。
var app = new Vue({
    el:'#app',
  data:{
  imgData:'img/blog_grid_3.jpg',
  imgData_1:'img/blog_grid_1.jpg',
  imgData_2:'img/blog_grid_2.jpg'
}
})

var app1 = new Vue({
    el:'#app1',
  data:{
  imgData_a:'img/blog_grid_1.jpg',
  imgData_b:'img/blog_grid_3.jpg',
  imgData_c:'img/blog_grid_2.jpg'
}
})