JavaScript

Vue.jsで親から子のコンポーネント内メソッドを発火させる

みなさん、こんにちは。どんぶラッコです。

今日は、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() メソッドを実行してください、という意味になるのです。

概念押さえられたでしょうか?バンバン活用していきましょう!

参考:

https://qiita.com/TK-C/items/0a3acb9d0d310f8fd380

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です