Vue-Routerを使用する時、Vuex無しで<router-view />に複数のイベントを渡したい

Vue.js初学者です。現在、vue-routeを使用して、アプリケーションを作成しようとしています。

前提: 私の理解

全体で使用する変数は親コンポーネントで定義して、propsとしてそれを子コンポーネントに渡す。
子コンポーネントでは渡されたpropsを直接書き換えてはいけない。そのため、親コンポーネントの変数を上書きしたい場合、親コンポーネントに値を変更するためのメソッド(カスタムイベント)を用意して、子コンポーネントからそれを呼び出す
親コンポーネントから子コンポーネントを呼び出す時には

vue
1<templete>
2  <childComponent :parentValue="parentValue" @parentCustomEvent="parentCustomEvent">
3</template>

のように、変数を上書きするメソッドを子コンポーネントに渡しておき、子コンポーネント側でthis.$emit('parentCustomEvent');のように呼び出して変数を上書きしてもらう

本題: 疑問点

さて、ここで問題になるのはView-Routerを使用する場合、<router-view/>に複数のカスタムイベントをどうやって渡すかということです。

たとえば以下のような場合、???の部分はどのように指定するか、です。

vue
1<template>
2  <div id="app">
3    <router-view :parentValues="parentValues" @???="???" />
4  </div>
5</template>
6
7
8<script>
9export default {
10  name: 'app',
11  data() {
12    return {
13      parentValues: {
14        parentValue1: 'hogehoge',
15        parentValue2: 'hogehoge',
16      },
17    };
18  },
19  methods: {
20    parentEvent1() {
21      this.parentValue = 'fugafuga';
22    },
23    parentEvent2() {
24      this.parentValue = 'fugafuga';
25    },
26  },
27};
28</script>

propsはオブジェクトにすることで<router-view :parentValues="parentValues" のようにまとめて渡せるのですが、methodは

methods: {
  parentEvents: {
    parentEvent1() {
      this.parentValue = 'fugafuga';
    },
    parentEvent2() {
      this.parentValue = 'fugafuga';
    },
  },
}

としてオブジェクトにまとめて、<router-view @parentEvents="parentEvents" />のように渡すとエラーになってしまいました。

<router-view @parentEvents1="parentEvents1" @parentEvents2="parentEvents2" />と書き並べまくれば複数渡せそうではありますが...。

Vuexを使えばいいのかもしれませんが、大した規模ではないのでわざわざ導入したくはありません。

このような場合の定番の書き方があればご教示願いたいです。
よろしくおねがいいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

psephopaiktesさんが求めている答えであるかはわかりませんが、「様々な名前のイベントをlistenする」という考え方ではなくて、「あるひとつのカスタムイベントをlistenして、区別は引数でつける」という考え方にしてみてはどうでしょうか。
イベントリスナーはテンプレートで設定せず、vm.$on()を使います。

Vue
1<template>
2  <div id="app">
3    <router-view :parentValues="parentValues" />
4  </div>
5</template>
6
7
8<script>
9export default {
10  mounted() {
11    this.$on('commonEventName', function(e) {
12      if (e.type === 'click') {
13        this.method1(e.msg);
14      } else if (e.type === 'input') {
15        this.method2(e.value);
16      }
17    });
18  },
19  methods: {
20    method1(msg) {
21      // 処理...
22    },
23    method2(value) {
24      // 処理...
25    },
26  },
27};
28</script>

子コンポーネントで、vm.$emitしてイベントを送出します。

Vue
1<template>
2  <div id="child1">
3    <button type="button" @click="$emit('commonEventName', { type: 'click', msg: 'clicked!' })">Click</button>
4  </div>
5</template>

Vue
1<template>
2  <div id="child2">
3    <input
4      type="text"
5      @input="handleInput($event.target.value)" />
6  </div>
7</template>
8
9<script>
10export default {
11  methods: {
12    handleInput(value) {
13      this.$emit('commonEventName', { type: 'input', value: value })
14    }
15  }
16};
17</script>