Vuejsで子コンポーネントのメソッドを親から呼びたい

Question

子コンポーネントに設定してあるメソッドを親から呼び出したいと思ってます。

逆の場合には、$emitを使えばいいと思うのですが、親から子のメソッドを呼ぶにはどうすればいいのでしょうか？または、そもそもそういったことはすべきではないのでしょうか？よろしくお願いします。

Answer 1

小規模なものの場合は、this.$refs.foo.bar() のように$refsで子コンポーネントのメソッドを呼び出すことも可能です。
が、コンポーネント間の直接のデータの参照は推奨されていません。

コンポーネント - Vue.js

しかし、はっきりと定義されたインタフェースを経由して、親と子を可能な限り分離されたものとしておくこともまた、とても大切です。これにより、各々のコンポーネントのコードは比較的独立した状態で書かれ判断されることが保証されます。それゆえ、コンポーネントを、よりメンテナンス可能で潜在的に再利用可能にできます

したがって、基本的には

• 子から親は $emit
• 親から子は props

でデータを受け渡すのが良いかもしれません。

ただ、propsでは直接的に子コンポーネントのメソッドを呼び出すことはできません。
したがって、コンポーネント間の処理の連携には下記のようにEventBusを使う手段があります。

親子間以外の通信

var EventBus = new Vue()

Object.defineProperties(Vue.prototype, {
    $bus: {
        get() {
            return EventBus
        }
    }
}

let ComponentY = Vue.extend({
  mounted(){
    this.$bus.$on('onMountedX', () => {
        console.log('onMountedX')
    })
  }
})

let ComponentX = Vue.extend({
  mounted(){
    this.$bus.$emit('onMountedX')
  }
  components: [ComponentY]
})

ただし、より大規模なものを作る場合はvuexみたいなものでステート管理を行うのが良いです。

Answer 2

refでやるのが良さそうです

複雑になる場合はvuexを使います

Answer 3

子コンポーネントにref属性で参照できるようにしておくと、親から子のメソッドを呼び出せます
以下サンプルプログラムです。
親コンポーネントのApp.vueのtestメソッドで、$refsを使って子コンポーネントのTest.vueのメソッドを呼び出しています。

App.vue

<template>
  <div id="app">
    <test ref="test"></test>
    <button @click="test">test</button>
  </div>
</template>
<script>
import Test from "./Test.vue"

export default {
  methods:{
    test(){
      console.log("parentMethod")
      this.$refs.test.childMethod()
    },
  },
  components:{Test}
}
</script>

Test.vue

<template>
    <p>test</p>
</template>

<script>
export default {
    methods:{
        childMethod(){
            console.log("childMethod")
        }
    }
}
</script>