【Vue.js】親コンポーネントから子コンポーネントのメソッドを呼び出す方法

記事内に商品プロモーションを含む場合があります

このページでは、Vue.jsの親コンポーネントから子コンポーネントのメソッドを呼び出す方法について紹介します。

やり方

やり方は次の通りです。

まずは子コンポーネントにref属性を使って名前をつけます。

Parent.vue

<child-component ref="child"></child-component>

このように記述することで、親コンポーネントから子コンポーネントを参照できるようになります。

上の例では、「child」という名前にしていますが、なんでもOKです。

わかりやすい名前をつけましょう。

続いて、親コンポーネントから子コンポーネントのイベントを発火します。

Parent.vue

methods: {
    showModal: function() {
    // 子コンポーネントのメソッド呼び出し
    this.$refs.child.showModal()
   }
}

呼び出し方法は「this.$refs.ref属性に指定した名前.呼び出したいイベント名」のように書きます。

上の例の場合、子コンポーネントにある「showModal()」メソッドが呼ばれるようになります。

Child.vue

methods: {
  showEditModal: function(){
      this.showModal = true
      this.showModalBg = true
}

created by Rinker

¥3,699
(2025/02/05 13:00:46時点 Amazon調べ-詳細)