欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解vue?祖先組件操作后代組件方法

 更新時(shí)間:2022年11月01日 10:04:45   作者:?jiǎn)葱歉哒? 
最近寫(xiě)代碼遇到一問(wèn)題祖先級(jí)別的組件怎么操作孫子的兒子的組件方法,在網(wǎng)上搜了半天都是父子傳參,父子操作,暈暈乎乎的想起了bus,接下來(lái)通過(guò)本文給大家介紹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
            })
        },

四、一定要在接收的組件銷(xiāo)毀鉤子里卸載掉

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)文章

  • 區(qū)分vue-router的hash和history模式

    區(qū)分vue-router的hash和history模式

    這篇文章主要介紹了區(qū)分vue-router的hash和history模式,幫助大家更好的理解和學(xué)習(xí)vue路由,感興趣的朋友可以了解下
    2020-10-10
  • 整理項(xiàng)目中vue.config.js打包優(yōu)化配置方法

    整理項(xiàng)目中vue.config.js打包優(yōu)化配置方法

    這篇文章主要介紹了整理項(xiàng)目中vue.config.js打包優(yōu)化,包括配置?webpack-bundle-analyzer?插件查看文件大小及配置compression-webpack-plugin?用gzip壓縮打包的文件大小,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-02-02
  • Vue自定義模態(tài)對(duì)話框彈窗

    Vue自定義模態(tài)對(duì)話框彈窗

    這篇文章主要為大家詳細(xì)介紹了Vue自定義模態(tài)對(duì)話框彈窗,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • 詳解Vue.js分發(fā)之作用域槽

    詳解Vue.js分發(fā)之作用域槽

    本篇文章主要介紹了詳解Vue.js分發(fā)之作用域槽,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • Vue自定義render統(tǒng)一項(xiàng)目組彈框功能

    Vue自定義render統(tǒng)一項(xiàng)目組彈框功能

    這篇文章主要介紹了Vue自定義render統(tǒng)一項(xiàng)目組彈框功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-06-06
  • 在vue項(xiàng)目中使用md5加密的方法

    在vue項(xiàng)目中使用md5加密的方法

    這篇文章主要介紹了在vue項(xiàng)目中使用md5加密的方法,需要的朋友可以參考下
    2018-09-09
  • Vue中$bus的用法及$on、$off的使用說(shuō)明

    Vue中$bus的用法及$on、$off的使用說(shuō)明

    這篇文章主要介紹了Vue中$bus的用法及$on、$off的使用說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • 聊聊vue生命周期鉤子函數(shù)有哪些,分別什么時(shí)候觸發(fā)

    聊聊vue生命周期鉤子函數(shù)有哪些,分別什么時(shí)候觸發(fā)

    這篇文章主要介紹了聊聊vue生命周期鉤子函數(shù)有哪些,分別什么時(shí)候觸發(fā)?具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue中的路由傳值與重調(diào)本路由改變參數(shù)

    vue中的路由傳值與重調(diào)本路由改變參數(shù)

    這篇文章主要介紹了vue中的路由傳值與重調(diào)本路由改變參數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue利用AJAX請(qǐng)求獲取XML文件數(shù)據(jù)的操作方法

    Vue利用AJAX請(qǐng)求獲取XML文件數(shù)據(jù)的操作方法

    在現(xiàn)代Web開(kāi)發(fā)中,從前端框架到后端API的交互是必不可少的一部分,Vue.js作為一個(gè)輕量級(jí)且功能強(qiáng)大的前端框架,支持多種方式與服務(wù)器通信,從而獲取或發(fā)送數(shù)據(jù),本文將詳細(xì)介紹如何在Vue.js項(xiàng)目中使用AJAX請(qǐng)求來(lái)獲取XML格式的數(shù)據(jù),需要的朋友可以參考下
    2024-09-09

最新評(píng)論