詳解Vue中組件傳值的多重實現(xiàn)方式
vue中組件傳值方式整理
1.我們最熟悉的父子組件傳值
父->子 props 子->父 $emit
這些我們最常用的就不說了，如果有不理解的，俺這兒有篇不錯的文章，鏈接奉上~
https://www.cnblogs.com/LoveAndPeace/p/7273648.html
2.兄弟組件或無關系組件之間的傳值
我們最常用的方式采用一個第三方變量 俗稱eventbus 通過其中一個$emit發(fā)另一個$on接收的方式 實現(xiàn)組件傳值 main.js中掛載一下
在其中一個頁面$emit
另一個頁面$on
是不是有點像昨天我寫的pubsub呢？哈哈哈哈哈
3.attr和listener進行傳值(注意，這兩種只能向下傳遞)
父組件里的子組件上寫上你要傳遞的鍵名鍵值，
子組件里通過{{$attrs}}拿到你所有傳遞的值
這樣直接就拿到了，是不是很神奇~
效果：
子組件里通過{{$attrs}}拿到你所有傳遞的值
子組件下邊還有組件 可以用v-bind:"$attrs"傳遞，在孫子組件中通過{{$attrs}}拿
listener用來傳遞事件，用法大致一個樣
我們設置一個點擊事件
在子元素中↓我們console下，看看拿到沒有
再籠統(tǒng)的概述下
vue中 listeners事件傳遞
父組件里的子組件上寫個函數(shù) 比如@log="log"，在當前頁的methods:{}里對應上執(zhí)行的語句
子組件觸發(fā)的話里寫個觸發(fā)事件，如click="aaa"
methods寫法:
methods:{
aaa(){
this.$listeners.你父組件的那個方法 這里是this.$listeners.log()調用
}
}
子組件下還有組件的話 用v-on:"$listeners"再往下傳
下面繼續(xù)用子組件獲取的方法獲取
4.采用ref的方式 有點react父傳子的亞子
but！也不太一樣 ，在你父組件引入的子組件上寫個ref="xxx"，你父組件便拿到了一系列子組件的東西，比如數(shù)據，事件等↓
5.用vuex 就不用說了吧 數(shù)據集中起來，每個頁面值都能相互拿到
state里設置值
通過stor.state.值拿到值
通過commit 或者dispatch往mutations和actions里提交可以做數(shù)據對應處理等等....
6.通過provide設置，inject取值但是這種方式不建議用
舉個栗子：
另一個組件
搞定~ 這是整理的一些組件傳值的方法，初來乍到許多寫文的格式不太會調，大家湊合看
總結
以上所述是小編給大家介紹的Vue中組件傳值的多重實現(xiàn)方式,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
vue項目前端微信JSAPI與外部H5支付相關實現(xiàn)過程及常見問題
這篇文章主要介紹了vue項目前端微信JSAPI與外部H5支付相關實現(xiàn)過程及常見問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
vue-cli中的babel配置文件.babelrc實例詳解
Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。本文介紹vue-cli腳手架工具根目錄的babelrc配置文件，感興趣的朋友一起看看吧2018-02-02
這篇文章主要介紹了vue獲取參數(shù)的幾種方式總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue?是如何將一份模板轉換為真實的?DOM?節(jié)點的,又是如何高效地更新這些節(jié)點的呢,這些都離不開虛擬dom這個概念,下面我們就來了解下虛擬dom這個概念以及它是什么吧2024-01-01
這篇文章主要給大家介紹了vue.js實現(xiàn)請求數(shù)據的方法示例，文中分別介紹了vue1.0和vue2.0的示例方法，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
在項目開發(fā)過程中,可能需要實現(xiàn)以下場景,未讀消息提示、報警信息、消息通知等,下面這篇文章主要給大家介紹了關于vue通知提醒消息的相關資料,需要的朋友可以參考下2023-03-03
Vue.js devtool插件最近在開發(fā)人員中很火，這篇文章主要為大家詳細介紹了Vue.js devtool插件安裝后無法使用，出現(xiàn)提示“vue.js not detected”的解決辦法2017-11-11
狀態(tài)管理也就是數(shù)據狀態(tài)管理，vue應用程序的各組件之間經常需要進行通信，除了v-on、EventBus等通信方式外，可以采用數(shù)據共享的方式進行通信。這種簡單的數(shù)據共享模式就是store模式。2021-05-05
Vue使用Three.js創(chuàng)建交互式3D場景的全過程
在現(xiàn)代Web開發(fā)中,通過在頁面中嵌入3D場景,可以為用戶提供更加豐富和交互性的體驗,Three.js是一款強大的3D JavaScript庫,它簡化了在瀏覽器中創(chuàng)建復雜3D場景的過程,本文將介紹如何在Vue中使用Three.js,創(chuàng)建一個簡單的交互式3D場景,需要的朋友可以參考下2023-11-11
解決VueCil代理本地proxytable無效報錯404的問題
這篇文章主要介紹了解決VueCil代理本地proxytable無效報錯404的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11