vue两个不同子组件的$ref为何却指向同一个方法？

Question

我的需求是：在父组件里同时调用两个不同子组件的方法！我用ref只能顺利调用一个子组件的方法，两个或多个的时候 ref就会被覆盖

Answer 1

有没有尝试用Bus呢？
用法如下

//假设 bb 组件里面有个按钮，点击按钮，把 123 传递给 aa 组件
// 根组件（this.$root)
new Vue({
 el: '#app',
 router,
 render: h => h(App),
 data: {
  // 空的实例放到根组件下，所有的子组件都能调用
  Bus: new Vue()
 }
})

bb 组件内调用事件触发↓
<button @click="submit">提交<button>

methods: {
  submit() {
   // 事件名字自定义，用不同的名字区别事件
   this.$root.Bus.$emit('eventName', 123)
  }
 }


aa 组件内调用事件接收↓
 // 当前实例创建完成就监听这个事件
 created(){
  this.$root.Bus.$on('eventName', value => {
   this.print(value)
  })
 },

 methods: {
  print(value) {
   console.log(value)
  }
 },

 // 在组件销毁时别忘了解除事件绑定
 beforeDestroy() {
   this.$root.Bus.$off('eventName')
 },