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

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

やり方

やり方は次の通りです。

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
}

基礎から学ぶ Vue.js

created by Rinker

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング
• 紀伊國屋書店