vue, nuxt 兄弟コンポーネント間でのメソッド実行方法

//親:index.vue
<template>
  <Test1 />
  <Test2 />
</template>
<script>
export default {}
</script>

//子1:Test1.vue
<template>
  <v-btn>Open Dialog</v-btn>
</template>

<script>
  export default {
    
  }
</script>

//子2:Test2.vue
<template>
  <v-row justify="center">
    <p @click="open()">open</p>
    <v-dialog
      v-model="dialog"
      persistent
      max-width="290"
    >
      <v-card>
       <v-card-actions>
          <v-btn
            color="green darken-1"
            text
            @click="dialog = false"
          >
            Agree
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
  export default {
    data () {
      return {
        dialog: false,
      }
    },
    methods: {
      open () {
        this.dialog = true;
      }
    }
  }
</script>

現在上記の構成で作成しているのですが、
Test2.vueの**<p @click="open()">open</p>の部分で、
v-dialogの部分をちゃんと開けるのですがこれを
Test1.vueの<v-btn>Open Dialog</v-btn>**の部分で
開くようにしたいのですが、なかなかnuxtでの兄弟間のメソッドのやり取りが見つけられず
どう書けばいいか教えていただけますでしょうか？

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

回答1件

ベストアンサー

ご質問拝見いたしました。

ref,$refs,$emitを利用することで対応できると思いました。

以下例になります。

親

Vue
1<template>
2  <Test1 @onClick="test()"/> // v-onでtest関数をセット
3  <Test2 ref="test2" /> // refで任意の名前を設定
4</template>
5
6<script>
7import Test1 from '@/components/Test1.vue';
8import Test2 from '@/components/Test2.vue';
9
10export default {
11  components: {
12    Test1,
13    Test2
14  },
15  methods: {
16    test() {
17      this.$refs.test2.open(); // Test2タグで設定した任意の名前を$refsに続いて指定。さらにTest2で呼び出したい関数を指定。今回はopen関数
18    }
19  }
20};
21</script>
22

子1:Test1.vue

Vue
1<template>
2  <v-btn @click="open()">Open Dialog</v-btn> // @clickにopen関数を設定
3</template>
4
5<script>
6  export default {
7    methods: {
8      open() {
9        this.$emit('onClick'); // $emitで親でv-onで設定しているonClickを指定
10      }
11    }
12
13  }
14</script>