개요

vue-router 사용시의 「자식 → 부모」또는 「아이 1 → 자식 2」의 이벤트 전달의 기술 방법에 대해서 자신 용 메모

소스 코드는 간략화한 것으로, 제대로 테스트하고 있지 않기 때문에 움직이지 않을지도

샘플 코드

this.$router.app.$on 를 다루는 것이 포인트. 그 이외는 통상의 이벤트 버스의 방법과 같다.

주요 부분

app.js

//(前略)
const app = new Vue({
    router, // これが「ルーターインスタンスを root インスタンスに router オプションとして」かな？
    el: '#app',
    render: h => h(App)
});

상위 구성요소

parent.vue

<template>
    <div>  
        <child1></child1>
        <child2></child2>
    </div>
</template>

<script>
// 子２つを配置するのみ
import component_child1 from './child1.vue'
import component_child2 from './child2.vue'

export default {
    components: {
      'child1': component_child1,
      'child2': component_child2
    }
};
</script>

아이 컴퍼넌트(2개)

목표로 하는 동작은 하기.

child1에서 버튼을 누르면 test_method_child1가 실행됩니다.

test_method_child1 에서 test_event_global 가 throw 되고 child1 은 숨겨져 있습니다.

child2에서 이벤트 해제 (중요, 후술. 참고 자료를 참조.)

child2에서는 이벤트를 test_event_global 를 test_event_child2 로 둔다.

child2에서 이벤트를 받으면 v-on:test_event_child2 에서 test_method_child2 가 실행.

child2가 표시되고 Hello World가 보입니다.

child1.vue

<template>
    <div v-show="visible_child1">
       <button v-on:click="test_method_child1">Run Test</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            visible_child1 : true  // 表示/非表示制御
        };
    },
    methods: {
        test_method_child1() {
            this.visible_child1 = false;
            // イベントバスを this.$router.app として、イベントをスロー
            this.$router.app.$emit('test_event_global');
        }
    }
}
</script>

child2.vue

<template>
    <div v-on:test_event_child2="test_method_child2" v-show="visible_child2">
       Hello world !!
    </div>
</template>

<script>
export default {
    data() {
        return {
            visible_child2 : false // 表示/非表示制御
        };
    },
    mounted() {
        // イベントバスを this.$router.app として、コンポーネントのイベントに紐づけている
        this.$router.app.$off('test_event_global');
        this.$router.app.$on('test_event_global', this.test_event_child2);
    },
    methods: {
        test_method_child2() {
            this.visible_child2 = true;
        }
    }
}
</script>

주의점

아래 참고 자료 2 Vue.js의 글로벌 이벤트 버스에서 비 부모 및 자식 통신과 vue-router에서 인용

해제가 이루어지지 않는다, 보다는 .$off 하지 않으면 축적하는 것 같습니다

페이지 천이해 created나 mounted가 몇번이나 불리면(자), 그 때마다 축적되어 버린 것 같다.
(beforeDestroy 또는 destroyed 중에서 해제해야합니까?)

상기는 예. $on으로 메소드를 직접 두드릴 수도 있다.
표시/숨기기 같은 것을 실현하는 것만으로는 v-on은 취해 버려

child2.vue

<div v-show="visible_child2">
（中略）
this.$router.app.$on('test_event_global', this.test_method_child2);

하는 것도.

참고 자료

Vue Router/API 참조

라우터 인스턴스 속성

컴포넌트 주입

Vue.js의 글로벌 이벤트 버스에서 비 부모 및 자식 통신과 vue-router