서로 다른 것을 참조하는 마우스 호버 기능서로 다른 것을 참조하는 마우스 호버 기능같은 Vue.js 함수에서.

서로 다른 것을 참조하는 마우스 호버 기능

같은 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>

내 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')의 영상이 변경되는 것이 가능한가?

Vue 인스턴스에서 내장 이벤트 버스를 사용할 수 있다.세 번째 Vue 인스턴스에서 변경 사항 청취 및 이벤트 내보내기두 앱 모두에서 이 세 번째 Vue 인텐션에 액세스할 수 있는지 확인하십시오.이 기능에 대해 자세히 알아보려면 다음 문서를 참조하십시오.

다음은 이러한 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를 사용하여 상태를 한 곳에 두고 구성 요소에서 이 글로벌 상태에 액세스할 수 있다.

참조URL: https://stackoverflow.com/questions/58961749/mouse-hover-function-to-refer-different-div-id-on-same-vue-js-function