pei’s blog

情報系の大学を出たSE1年生。主にプログラミング(機械学習寄り)の話題を書いていきます。

VueJSで子コンポーネントにメソッドを渡す

 子コンポーネントにv-bind="{メソッド名}"を指定することで、props経由で親コンポーネントのメソッドを渡せます。

 ちなみに子コンポーネントで(this.)$parent.親メソッドでも実行できますが非推奨みたいです。
 $parentを使った直接参照はコンポーネント間の依存度を高めると思うのでできるだけ回避した方がいいですね。

 VueJSを使ってタスク管理のサンプルプログラムを書いたのでぜひ参考にしてください。
peiprog.hatenablog.com

parent.vue

<div id="app">
  <!-- v-bindでメソッドを子コンポーネントに渡す -->
  <child v-bind="{parentMethod}"></child>
</div>
<script>
  import Child from "./child.vue"

  new Vue({
    el: "#app",
    components: {
      // 子コンポーネント
      "child": Child
    },
    ...
  }
);
</script>
child.vue

<template>
  <div>
    <!-- 親コンポーネントのメソッド実行 -->
    <button @click="parentMethod">親コンポーネントのメソッド実行</button>
  </div>
</template>
<script>
  export default {
    // 親コンポーネントからprops経由でメソッドを受け取る
    props: ["parentMethod"],
    methods: {
      childMethod: function () {
        // 親コンポーネントのメソッド実行
        this.parentMethod();
      }
    }
  }
</script>