鼠标悬停函数在同一 Vue.js 函数上引用不同的 <div id>

Posted 2023-02-22

【中文标题】鼠标悬停函数在同一 Vue.js 函数上引用不同的 <div id>

【英文标题】：Mouse Hover function to refer different <div id> on same Vue.js function

【发布时间】：2020-03-16 14:35:28

【问题描述】：

我在定义 mouseover 属性的“.html”文件中有两个 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>

在我的 app.js 中，我提到了以下代码

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'

)

如果我将鼠标悬停在 div id="app" (1st 'div') 上的图像上然后 div id="app1" (2nd 'div') 上的图像发生变化，是否有可能？

【问题讨论】：

您可以在app1 中创建一个事件处理程序，并将其连接到app 中的偶数。

你也可以在这里使用指令。

【参考方案1】：

您可以在 Vue 实例中使用内置的事件总线。在第三个 Vue 实例上监听变化并发出事件。你只需要确保你可以在你的两个应用程序中访问这第三个 Vue 实例。这里有一篇文章可以阅读更多关于这个功能的信息：article

这是一个关于如何使用这种 EventBus 的示例：

const EventBus = new Vue();

// subscribe to the event 'some-event' and add a handler function
EventBus.$on('some-event', data => 
  console.log('"some-event" was called via event.');
  console.log(data);
);

// actually emit the event with some payload
EventBus.$emit('some-event',  test: 123 );

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

---

您可能还想问自己是否真的需要运行两个独立的 Vue 实例。许多用例可以在同一个 Vue 实例中处理。您可能想查看有关组件和路由的主题。

组件之间的通信也可以使用全局状态。你可以例如使用 Vuex 将您的状态保存在一个位置，并从您的组件中访问此全局状态。