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

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

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

やり方

やり方は次の通りです。

  1. 子コンポーネントにref属性を使って任意の名前をつける。
  2. 親コンポーネントのメソッド内から子コンポーネントのイベントを発火

1. 子コンポーネントにref属性を使って任意の名前をつける

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

Parent.vue

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

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

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

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

2. 親コンポーネントのメソッド内から子コンポーネントのイベントを発火

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

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
(2024/06/19 07:21:10時点 Amazon調べ-詳細)

コメントを残す

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

CAPTCHA