詳解vue?祖先組件操作后代組件方法
更新時間：2022年11月01日 10:04:45 作者：喆星高照
最近寫代碼遇到一問題祖先級別的組件怎么操作孫子的兒子的組件方法，在網(wǎng)上搜了半天都是父子傳參，父子操作，暈暈乎乎的想起了bus，接下來通過本文給大家介紹vue?祖先組件操作后代組件方法,需要的朋友可以參考下
前言：最近寫代碼遇到一問題：祖先級別的組件怎么操作孫子的兒子的組件方法（是不是已經(jīng)繞暈了），在網(wǎng)上搜了半天都是父子傳參，父子操作，暈暈乎乎的想起了bus(事件總線)，
原理就是：是在vue原型上掛載（生命周期為實例創(chuàng)建之前beforcreate），通過這個實例里的事件派發(fā)和事件監(jiān)聽實現(xiàn)跨組件通信，設(shè)計模式叫做觀察者模式(vue上就有$on，$emit 、$off)。
話不多說了，直接看代碼吧
一、首先
// 在 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é)：以上就是我對bus的使用和理解，有寫的不到位的地方，還望各位指正，留言區(qū)歡迎大家發(fā)言評論哦?。。?/p>
vue3 中“provide 與 inject“祖與后代組件間通信
一、其他Composition API
1.provide 與 inject
作用：實現(xiàn)祖與后代組件間通信 父傳子
套路：父組件有一個 provide 選項來提供數(shù)據(jù)，后代組件有一個 inject 選項來開始使用這些數(shù)據(jù)
祖組件中：
setup(){
......
let car = reactive({name:'奔馳',price:'40萬'})
provide('car',car) // 給自己的后代組件傳遞數(shù)據(jù)
......
}后代組件中：
setup(props,context){
......
const car = inject('car') // 拿到祖先的數(shù)據(jù)
return {car}
......
}到此這篇關(guān)于vue 祖先組件操作后代組件方法的文章就介紹到這了,更多相關(guān)vue 祖先組件操作后代組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
區(qū)分vue-router的hash和history模式
這篇文章主要介紹了區(qū)分vue-router的hash和history模式，幫助大家更好的理解和學習vue路由，感興趣的朋友可以了解下2020-10-10
整理項目中vue.config.js打包優(yōu)化配置方法
這篇文章主要介紹了整理項目中vue.config.js打包優(yōu)化,包括配置?webpack-bundle-analyzer?插件查看文件大小及配置compression-webpack-plugin?用gzip壓縮打包的文件大小，本文結(jié)合實例代碼介紹的非常詳細，需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細介紹了Vue自定義模態(tài)對話框彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
本篇文章主要介紹了詳解Vue.js分發(fā)之作用域槽，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了Vue自定義render統(tǒng)一項目組彈框功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了在vue項目中使用md5加密的方法,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了Vue中$bus的用法及$on、$off的使用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
聊聊vue生命周期鉤子函數(shù)有哪些,分別什么時候觸發(fā)
這篇文章主要介紹了聊聊vue生命周期鉤子函數(shù)有哪些，分別什么時候觸發(fā)？具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中的路由傳值與重調(diào)本路由改變參數(shù)
這篇文章主要介紹了vue中的路由傳值與重調(diào)本路由改變參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue利用AJAX請求獲取XML文件數(shù)據(jù)的操作方法
在現(xiàn)代Web開發(fā)中,從前端框架到后端API的交互是必不可少的一部分,Vue.js作為一個輕量級且功能強大的前端框架,支持多種方式與服務(wù)器通信,從而獲取或發(fā)送數(shù)據(jù),本文將詳細介紹如何在Vue.js項目中使用AJAX請求來獲取XML格式的數(shù)據(jù),需要的朋友可以參考下2024-09-09