關(guān)于Vue組件間的常用傳參方式
組件間常用傳參方式
1. props、emit（最常用的父子通訊方式）
父傳子
父組件傳入屬性，子組件通過props接收，就可以在內(nèi)部this.XXX的方式使用
// 父組件
<hello-world msg="hello world!"><hello-world>
// 子組件
<div>{{msg}}</div>
props：['msg']子傳父
子組件$emit（事件名，傳遞的參數(shù)）向外彈出一個自定義事件，在父組件中監(jiān)聽子組件的自定義事件，同時也能獲取子組件傳出來的參數(shù)
//?? ?子組件
<input v-model="username" @change="setUser">
return {
? ? username:'tct'
}
methods：{
? ?? ?setUser(){
? ?? ??? ?this.$emit('transferUser', username)
? ?? ?}
}
//?? ?父組件
<hello-world @transferUser="getUser"><hello-world>
return {
? ? user:''
}
methods：{
? ?? ?getUser(msg){
? ?? ??? ?this.user = msg
? ?? ?}
}2. 事件總線EventBus（常用任意兩個組件之間的通訊）
原理：注冊的事件存起來，等觸發(fā)事件時再調(diào)用。定義一個類去處理事件，并掛載到Vue實(shí)例的this上即可注冊和觸發(fā)事件，也可拓展一些事件管理
class Bus {
? constructor () {
? ? this.callbackList = {}
? }
? $on (name, callback) {
? ? // 注冊事件
? ? this.callbackList[name] ? this.callbackList[name].push(callback) : (this.callbackList[name] = [callback])
? }
? $emit (name, args) {
? ? // 觸發(fā)事件
? ? if (this.callbackList[name]) {
? ? ? this.callbackList[name].forEach(cb => cb(args))
? ? }
? }
}
Vue.prototype.$bus = new Bus()
// 任意兩個組件中
// 組件一：在組件的 mounted() 去注冊事件
this.$bus.$on('confirm', handleConfirm)
// 組件二：觸發(fā)事件(如：點(diǎn)擊事件后執(zhí)行觸發(fā)事件即可)
this.$bus.$emit('confirm', list)3.Vuex狀態(tài)管理
（vue的核心插件，用于任意組件的任意通訊，需注意刷新后有可能vuex數(shù)據(jù)會丟失）
創(chuàng)建全局唯一的狀態(tài)管理倉庫store,有同步mutations、異步actions的方式去管理數(shù)據(jù)，有緩存數(shù)據(jù)getters，還能分成各個模塊modules易于維護(hù)，詳細(xì)使用見Vuex官方文檔
vue組件傳參記錄
幾個不太常用的組件傳值方法記載
在vue項目中，父子組件間的通訊很方便。但兄弟組件或多層嵌套組件間的通訊，就會比較麻煩。
parent / children 傳參調(diào)用方法
vue中打印this可以看到,parent / children 通過這兩個方法就可以實(shí)現(xiàn)組件傳參和調(diào)用各自的方法了
eventBus這個自己安裝下
通過main.js頁面的全局拋出然后再 通過$emit定義傳參修改 $on的方式監(jiān)聽變動 $off的方式銷毀
provide/inject
父組件注入 子組件拋出給data 在Vue 3中，使用provide/inject，需要先創(chuàng)建一個Symbol類型的token
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue動態(tài)生成form表單的實(shí)例代碼
這篇文章主要介紹了使用Vue動態(tài)生成form表單的實(shí)例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
這篇文章主要給大家介紹了關(guān)于vue如何批量引入組件、注冊和使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
今天小編就為大家分享一篇在Vue組件中獲取全局的點(diǎn)擊事件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue多級復(fù)雜列表展開/折疊及全選/分組全選實(shí)現(xiàn)
這篇文章主要介紹了vue多級復(fù)雜列表展開/折疊及全選/分組全選實(shí)現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家詳細(xì)介紹了基于vue.js實(shí)現(xiàn)圖片輪播效果，vue如何實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
詳解vue中父子組件傳遞參數(shù)props的實(shí)現(xiàn)方式
這篇文章主要給大家介紹了在vue中，父子組件傳遞參數(shù)?props?實(shí)現(xiàn)方式，文章通過代碼示例介紹的非常詳細(xì)，對我們的學(xué)習(xí)或工作有一定的參考價值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滑動和滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue使用代理解決請求跨域問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了vue項目中使用多選框的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
解決vue axios的封裝 請求狀態(tài)的錯誤提示問題
今天小編就為大家分享一篇解決vue axios的封裝 請求狀態(tài)的錯誤提示問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09