子コンポーネントにv-bind=”{メソッド名}”を指定することで、props経由で親コンポーネントのメソッドを渡せます。
ちなみに子コンポーネントで(this.)$parent.親メソッドでも実行できますが非推奨みたいです。
$parentを使った直接参照はコンポーネント間の依存度を高めると思うのでできるだけ回避した方がいいですね。
VueJSを使ってタスク管理のサンプルプログラムを書いたのでぜひ参考にしてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<template> <div> <!-- 親コンポーネントのメソッド実行 --> <button @click="parentMethod">親コンポーネントのメソッド実行</button> </div> </template> <script> export default { // 親コンポーネントからprops経由でメソッドを受け取る props: ["parentMethod"], methods: { childMethod: function () { // 親コンポーネントのメソッド実行 this.parentMethod(); } } } </script> |