本篇文章為大家展示了Vue中實現(xiàn)多重組件傳值,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
創(chuàng)新互聯(lián)是一家從事企業(yè)網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、做網(wǎng)站、行業(yè)門戶網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計制作的專業(yè)網(wǎng)站制作公司,擁有經(jīng)驗豐富的網(wǎng)站建設(shè)工程師和網(wǎng)頁設(shè)計人員,具備各種規(guī)模與類型網(wǎng)站建設(shè)的實力,在網(wǎng)站建設(shè)領(lǐng)域樹立了自己獨特的設(shè)計風(fēng)格。自公司成立以來曾獨立設(shè)計制作的站點上1000+。
vue中組件傳值方式整理
1.我們最熟悉的父子組件傳值
父->子 props 子->父 $emit
這些我們最常用的就不說了,如果有不理解的,俺這兒有篇不錯的文章,鏈接奉上~
https://www.cnblogs.com/LoveAndPeace/p/7273648.html
2.兄弟組件或無關(guān)系組件之間的傳值
我們最常用的方式采用一個第三方變量 俗稱eventbus 通過其中一個$emit發(fā)另一個$on接收的方式 實現(xiàn)組件傳值 main.js中掛載一下
在其中一個頁面$emit
另一個頁面$on
是不是有點像昨天我寫的pubsub呢?哈哈哈哈哈
3.attr和listener進(jìn)行傳值(注意,這兩種只能向下傳遞)
父組件里的子組件上寫上你要傳遞的鍵名鍵值,
子組件里通過{{$attrs}}拿到你所有傳遞的值
這樣直接就拿到了,是不是很神奇~
效果:
子組件里通過{{$attrs}}
拿到你所有傳遞的值
子組件下邊還有組件 可以用v-bind:"$attrs"
傳遞,在孫子組件中通過{{$attrs}}
拿
listener用來傳遞事件,用法大致一個樣
我們設(shè)置一個點擊事件
在子元素中↓我們console下,看看拿到?jīng)]有
再籠統(tǒng)的概述下 vue中 listeners事件傳遞 父組件里的子組件上寫個函數(shù) 比如@log="log",在當(dāng)前頁的methods:{}里對應(yīng)上執(zhí)行的語句 子組件觸發(fā)的話里寫個觸發(fā)事件,如click="aaa" methods寫法: methods:{ aaa(){ this.$listeners.你父組件的那個方法 這里是this.$listeners.log()調(diào)用 } } 子組件下還有組件的話 用v-on:"$listeners"再往下傳 下面繼續(xù)用子組件獲取的方法獲取
4.采用ref的方式 有點react父傳子的亞子
but!也不太一樣 ,在你父組件引入的子組件上寫個ref="xxx",你父組件便拿到了一系列子組件的東西,比如數(shù)據(jù),事件等↓
5.用vuex 就不用說了吧 數(shù)據(jù)集中起來,每個頁面值都能相互拿到
state里設(shè)置值
通過stor.state.值拿到值
通過commit 或者dispatch往mutations和actions里提交可以做數(shù)據(jù)對應(yīng)處理等等....
6.通過provide設(shè)置,inject取值但是這種方式不建議用
舉個栗子:
另一個組件
上述內(nèi)容就是Vue中實現(xiàn)多重組件傳值,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞名稱:Vue中實現(xiàn)多重組件傳值
標(biāo)題URL:http://muchs.cn/article38/ighpsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、動態(tài)網(wǎng)站、外貿(mào)建站、、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)