VueJS 2 : 구성 요소에서 Watch 메서

VueJS 2 : 구성 요소에서 Watch 메서

나는 2개의 구성요소로 VueJS2를 작업하고 있다.

원하는 동작:한 구성 요소에서 메서드가 트리거될 때마다 다른 구성 요소에서 메서드를 트리거하고 싶다.

내가 필요한 건 시계와 환불이겠지이것은 다음과 같이 보인다.

 watch: {
    'this.$refs.component1.method1': () => {
        console.log('TRIGGERED method1')
        this.$refs.component2.method1()
    },
    'this.$refs.component1.method2': () => {
    console.log('TRIGGERED metdod2')
    this.$refs.component2.method2()
  }

불행히도, 이것은 효과가 없다.메서드 콜을 볼 수 있을까?

일반적으로 관찰자와 참조는 이 시나리오에서 사용되지 않는다.당신이 사용할 수 있는 것은 구성 요소들이 어떻게 구성되어 있느냐에 달려 있다.자식에서 부모로 메서드를 보려면 구성 요소에서 사용자 지정 이벤트를 간단히 청취하십시오.그렇게 하면 당신은 $emit을 사용하여 구성 요소에서 이벤트를 방출할 수 있다.그런 다음 @customvent="Method"를 사용하여 부모 구성요소에 수신기를 추가할 수 있다.

Vue 문서들은 그것을 매우 잘 설명한다.

https://vuejs.org/v2/guide/components-custom-events.html

그들이 부모 자식 관계를 갖지 않을 때, 이벤트 버스는 당신이 필요로 하는 것이다.이것은 일반적으로 eventbus.js 또는 이와 유사한 파일을 포함하는 .js 파일을 만든다는 것을 의미한다.

import Vue from 'vue';
export const EventBus = new Vue();

그런 다음 이벤트를 교환할 모든 구성 요소에서 eventbus.js를 가져온 다음 다음과 같이 글로벌 이븐버스로 이벤트를 내보낼 수 있다.

import { EventBus } from './event-bus.js';

export default {
    methods: {
        EmitmyMethod () {
            EventBus.$emit('customevent') 
        },
        ListenToMyMethod () {
            EventBus.$on('customevent')
        }
    }
}

이에 대한 자세한 내용은 다음을 참조하십시오.

https://alligator.io/vuejs/global-event-bus/

참조URL: https://stackoverflow.com/questions/49770210/vuejs-2-watch-method-trigger-in-a-component