Last-Modified: 2022/06/05

Vue.jsで孫から親コンポーネントにデータを渡す方法【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsで孫から親コンポーネントにデータを渡す方法について、簡単に解説していきます。

親コンポーネント

Vue.jsでは孫から親コンポーネントにデータを渡せます。

まずは、親コンポーネント側のサンプルを以下に示します。

<div id="app">
  <child-component @click="parentEvent"></child-component>
</div>

<script>
var app = new Vue({
  el: '#app',
  methods: {
    parentEvent: function(text) {
      alert(text);
    }
  }
});
</script>

ここでは子コンポーネントの呼び出しを行い、孫コンポーネントから最終的に呼び出すメソッドを用意します。

子コンポーネント

次に子コンポーネント側のサンプルを以下に示します。

Vue.component('child-component',{
  template: '<grandchild-component @click="$listeners[\'click\']"></grandchild-component>'
});

子コンポーネントでは$listenersを使うことがコツです。

孫コンポーネントを呼ぶテンプレートのカスタムイベントで$listenersを書き、そのキーには親コンポーネントのカスタムイベント名を記載します。

孫コンポーネント

最後に孫コンポーネント側のサンプルを以下に示します。

Vue.component('grandchild-component',{
  template: '<button @click="$emit(\'click\', event.target.innerText)">孫イベント</button>'
});

孫コンポーネントでは$emitメソッドを使うことがコツです。

$emitメソッドの第一引数には子コンポーネントのカスタムイベント名を、第二引数には親コンポーネント側に渡したいデータを指定します。

• facebook
• Tweet
• Read Later