詳解vue?祖先組件操作后代組件方法
前言：最近寫(xiě)代碼遇到一問(wèn)題：祖先級(jí)別的組件怎么操作孫子的兒子的組件方法（是不是已經(jīng)繞暈了），在網(wǎng)上搜了半天都是父子傳參，父子操作，暈暈乎乎的想起了bus(事件總線)，
原理就是：是在vue原型上掛載（生命周期為實(shí)例創(chuàng)建之前beforcreate），通過(guò)這個(gè)實(shí)例里的事件派發(fā)和事件監(jiān)聽(tīng)實(shí)現(xiàn)跨組件通信，設(shè)計(jì)模式叫做觀察者模式(vue上就有$on，$emit 、$off)。
話不多說(shuō)了，直接看代碼吧
一、首先
// 在 src/mian.js
new Vue({
router,
store: new Vuex.Store(Store),
el: '#app',
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus = this //安裝全局事件總線
}
})二、在觸發(fā)事件的的祖先組件方法內(nèi)
this.$bus.$emit("holle",666)三、后代組件（不限于后代，就是任何組件）接受傳參
mounted() {
this.$bus.$on("holle",(data)=>{
console.log(data) //666
})
},四、一定要在接收的組件銷毀鉤子里卸載掉
beforeDestroy() {
this.$bus.$off("holle")
},總結(jié)：以上就是我對(duì)bus的使用和理解，有寫(xiě)的不到位的地方，還望各位指正，留言區(qū)歡迎大家發(fā)言評(píng)論哦?。?！
vue3 中“provide 與 inject“祖與后代組件間通信
一、其他Composition API
1.provide 與 inject
作用：實(shí)現(xiàn)祖與后代組件間通信 父?jìng)髯?/p>
套路：父組件有一個(gè) provide 選項(xiàng)來(lái)提供數(shù)據(jù)，后代組件有一個(gè) inject 選項(xiàng)來(lái)開(kāi)始使用這些數(shù)據(jù)
祖組件中：
setup(){
......
let car = reactive({name:'奔馳',price:'40萬(wàn)'})
provide('car',car) // 給自己的后代組件傳遞數(shù)據(jù)
......
}后代組件中：
setup(props,context){
......
const car = inject('car') // 拿到祖先的數(shù)據(jù)
return {car}
......
}到此這篇關(guān)于vue 祖先組件操作后代組件方法的文章就介紹到這了,更多相關(guān)vue 祖先組件操作后代組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue生成二維碼QR?Code的簡(jiǎn)單實(shí)現(xiàn)方法示例
這篇文章主要為大家介紹了vue生成二維碼QR?Code的實(shí)現(xiàn)示例詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
vue+elementui(對(duì)話框中form表單的reset問(wèn)題)
這篇文章主要介紹了vue+elementui(對(duì)話框中form表單的reset問(wèn)題)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue如何使用swiper插件修改左右箭頭的默認(rèn)樣式
這篇文章主要介紹了vue如何使用swiper插件修改左右箭頭的默認(rèn)樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vuejs使用$emit和$on進(jìn)行組件之間的傳值的示例
本篇文章主要介紹了vuejs使用$emit和$on進(jìn)行組件之間的傳值的示例，具有一定的參考價(jià)值，有興趣的可以了解一下2017-10-10
Vue.js+cube-ui（Scroll組件）實(shí)現(xiàn)類似頭條效果的橫向滾動(dòng)導(dǎo)航條
這篇文章主要介紹了Vue.js+cube-ui（Scroll組件）實(shí)現(xiàn)類似頭條效果的橫向滾動(dòng)導(dǎo)航條，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
Vue3?響應(yīng)式高階用法之customRef()的使用
customRef()是Vue3的高級(jí)工具,允許開(kāi)發(fā)者創(chuàng)建具有復(fù)雜依賴跟蹤和自定義更新邏輯的ref對(duì)象,本文詳細(xì)介紹了customRef()的使用場(chǎng)景、基本用法、功能詳解以及最佳實(shí)踐,包括防抖、異步更新等用例,旨在幫助開(kāi)發(fā)者更好地理解和使用這一強(qiáng)大功能2024-09-09
這篇文章主要給大家介紹了關(guān)于Vue路由模塊化配置的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue實(shí)現(xiàn)表格批量審核功能實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)表格批量審核功能實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
我們現(xiàn)在可以了解一下vue的過(guò)渡，vue在插入、更新以及移除DOM元素的時(shí)候，提供了很多不同方式過(guò)渡的效果，如果在css過(guò)渡自動(dòng)應(yīng)用class，在過(guò)渡鉤子函數(shù)中使用JavaScript直接操作DOM就可以了2022-08-08
關(guān)于Echarts餅圖圖例太長(zhǎng)的解決方案
這篇文章主要介紹了關(guān)于Echarts餅圖圖例太長(zhǎng)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02