みなさん、こんにちは。どんぶラッコです。
今日は、Vue.jsで親から子のコンポーネント内メソッドを発火させる方法について解説していきます！
子供から親へのイベント発火は $emit を用いますね。じゃあ親から子のメソッドを発火させるには…？
迷ってしまう方もいるのではないでしょうか。
今回は $emit の使用方法も復習しつつ、両方のメソッドの触り方を確認していきましょう！
前提: 親子コンポーネントそれぞれを作成
まずは親コンポーネント、子コンポーネントそれぞれを作成します。
できるだけシンプルにいきましょう。
<template>
<button
@click="emitEvent"
>
子コンポーネント
</button>
</template>
<style>
export default {
methods: {
emitEvent() {
this.$emit('child-emit')
},
sayHello() {
alert('Hello from Child!')
}
}
}
</style>続いて親コンポーネントです。
<template>
<div>
<p>親コンポーネント</p>
<ChildComponent
ref="child"
@child-emit="sayHello"
/>
</div>
</template>
<style>
import ChildComponent from './ChildComponent'
export default {
components: {
ChildComponent
},
methods: {
sayHelloFromChild() {
this.$refs.child[0].sayHello()
},
sayHello() {
alert('Hello from Parent!')
}
}
}
</style>
どんぶラッコ
検証しないでコードだけ書いたから間違ってたらごめんね。
今回は概念を抑えることが目的なので許してください！
今回は概念を抑えることが目的なので許してください！
子供→親のメソッドを実行する
$emit を使いますね。
子コンポーネントの方で、 emitEvent() というメソッドを叩くと、 child-emit というイベントが発火するようになっています。
methods: {
emitEvent() {
this.$emit('child-emit')
},
}そして、この発行された child-emit イベントを親側で受け取り、実行したいメソッドへと渡してあげます。
<template>
<div>
<ChildComponent
ref="child"
@child-emit="sayHello" ←← この部分！
/>
</div>
</template>親→子のメソッドを発火
これは $ref を用います。
親側でこんなメソッドを用意してみました。
methods: {
sayHelloFromChild() {
this.$refs.child[0].sayHello()
},
}$refs は指定した対象のDOM要素を引っ張ってこれるもの、と捉えている方も多いと思いますが、 $refs をVue Componentに指定してあげると、VueComponentインスタンスがまるっと取得できます。
なので、 this.$refs.child[0] 部分で、 ref="child" と指定した要素を取得、そして取得した要素内にある sayHello() メソッドを実行してください、という意味になるのです。
ちなみに、より体系的にインプットしたい方はこちらの書籍がおすすめです！
—
概念押さえられたでしょうか？バンバン活用していきましょう！
参考:
