はじめに

Vue で子コンポーネントのメソッドをコールする方法

TL;DR

  • $refs を使う
  • ref="xxx" を子コンポーネントに設定
  • this.$refs.xxx.some_method() で子コンポーネントのメソッドをコール
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.5
BuildVersion:	19F101

$ node -v
v12.7.0

$ npm -v
6.14.5

$ vue -V
@vue/cli 4.3.1

$ npm ls vue
vue@2.6.11 | MIT | deps: none | versions: 283

詳細

参考:

$refs を使うことで、子コンポーネントにアクセスできる。

parent.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div id="parent">
    <!-- コンポーネントに ref="xxx" を設定 -->
    <child ref="child_a" />
  </div>
</template>

<script >
  import child from './child';
  export default {
    components: {
      child,
    },
    methods: {
      callChildMethod() {
        // $refs.<ref_name> でアクセス
        // (ref_name は ref="xxx" で設定したもの)
        this.$refs.child_a.helloChild();
      },
    },
  }
</script>

child.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div id="child">
    <!-- ... -->
  </div>
</template>

<script >
  export default {
    methods: {
      helloChild() {
        console.log('hello from child');
      },
    },
  }
</script>

まとめ

  • $refs を使う
  • ref="xxx" を子コンポーネントに設定
  • this.$refs.xxx.some_method() で子コンポーネントのメソッドをコール

その他・メモ

以前は Event Bus を使う方法が公式だったが、いつのまにか非推奨になっていたらしい。詳細は下記ページを参照。

Vue.js の event bus (あるいは event hub) 、非推奨になっていた — ykrods note

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list