vue 父组件触发子组件methods中的方法

 

第一个父调子组件方法：

父：
<child ref="childMethod"></child>
子：
method: {
  test() {
     alert(1)
  }
}
在父组件里调用test即 this.$refs.childMethod.test()

第二个问题从 Vue 1.x 迁移 - vue.js

评论里有人说风格指南的问题。写了个对比一下。我觉得简单场景用上述方法没啥问题，不直接对子组件进行赋值this.$refs.child.a = xxx，杜绝使用this.$parent就行了。

父：
<child :touchTest="touchTest"></child>
data () {
  return {
    touchTest: false
  }
},
mounted () {
  this.touch() 
},
methods: {
  touch () {
    this.touchTest = !this.touchTest
  }
}
子：
props: ['touchTest'],
watch: {
  touchTest () {
    this.test()
  }
}
method: {
  test() {
     alert(1)
  }
}