◆当ページにはプロモーションが含まれています

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

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

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

@proglearn
一緒によく読まれている記事

COMMENT

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