はじめに

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 v 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