在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/C++  HTML/ vue兩個(gè)不同子組件的$ref為何卻指向同一個(gè)方法?

vue兩個(gè)不同子組件的$ref為何卻指向同一個(gè)方法?

圖片描述

圖片描述

我的需求是:在父組件里同時(shí)調(diào)用兩個(gè)不同子組件的方法!我用ref只能順利調(diào)用一個(gè)子組件的方法,兩個(gè)或多個(gè)的時(shí)候 ref就會(huì)被覆蓋

回答
編輯回答
痞性

有沒有嘗試用Bus呢?
用法如下

//假設(shè) bb 組件里面有個(gè)按鈕,點(diǎn)擊按鈕,把 123 傳遞給 aa 組件
// 根組件(this.$root)
new Vue({
 el: '#app',
 router,
 render: h => h(App),
 data: {
  // 空的實(shí)例放到根組件下,所有的子組件都能調(diào)用
  Bus: new Vue()
 }
})

bb 組件內(nèi)調(diào)用事件觸發(fā)↓
<button @click="submit">提交<button>

methods: {
  submit() {
   // 事件名字自定義,用不同的名字區(qū)別事件
   this.$root.Bus.$emit('eventName', 123)
  }
 }


aa 組件內(nèi)調(diào)用事件接收↓
 // 當(dāng)前實(shí)例創(chuàng)建完成就監(jiān)聽這個(gè)事件
 created(){
  this.$root.Bus.$on('eventName', value => {
   this.print(value)
  })
 },

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

 // 在組件銷毀時(shí)別忘了解除事件綁定
 beforeDestroy() {
   this.$root.Bus.$off('eventName')
 },
2017年12月24日 17:15