vue組件常用的父子、兄弟、跨組件等傳值方法
更新時間：2023年12月02日 09:56:34 作者：冷r
Vue常用的三種傳值方式有:??父傳子??子傳父??非父子傳值?引用官網(wǎng)的一句話:父子組件的關系可以總結為?prop?向下傳遞,事件向上傳遞,熟悉vue各類關系的組件之間傳值方法會令開發(fā)更加得心應手,下面將對父子、兄弟、頁級組件之間的傳值作淺談
一、props/$emit父子組件傳值：
父傳子 (自定義屬性 props)
父組件向子組件傳參，通過自定義屬性的方式進行傳參，在子組件中使用prop定義自定義的屬性，然后在父組件中通過v-bind指令把需要傳遞的數(shù)據(jù)綁定在子組件上，那在子組件中props里面的自定義屬性可以直接使用。
//父組件代碼 渲染子組件
<Son :name="name" />
// 子組件代碼，接受父參數(shù)
export default {
props: {
name:{
type:String,
default:"我是默認字符串"http://定義參數(shù)默認值
required:false//定義參數(shù)是否必須值
}
}
}
子傳父 (自定義事件 this.$emit)
子組件向父組件傳數(shù)據(jù)使用自定義事件， vue 組件提供了一個emit(‘自定義事件名’， 傳遞的數(shù)據(jù)) )，子組件傳遞數(shù)據(jù)時，觸發(fā)響應的事件函數(shù)，就會自動觸發(fā)通過$emit給父組件綁定的自定義事件，自定義事件接受一個參數(shù)，參數(shù)就是子組件傳遞過來的數(shù)據(jù)。
// 父組件代碼，渲染子組件
<Son @setValue="valueFn" />
export default{
method:{
valueFn(value) {}
}
}
// 子組件代碼
this.$emit('setValue', this.say)
二、ref與parent/children父子組件傳值:
父傳子
//父組件
<Home ref="home"></Home>
<button @click="toValue">點擊</button>
methods:{
toValue(){
this.msg = "這是父組件的值";
this.$refs.home.setMsg(this.msg);
}
}
//子組件
<div class="home">
{{msg}}
</div>
methods:{
setMsg(val){
this.msg = val;
}
}子傳父（如果子組件是公共組件，需判斷父組件是否具有該方法）
//父組件
<Home ref="home"></Home>
methods:{
toValue(val){
this.msg = val
}
}
//子組件
<div class="home">
<button @click="setMsg">點擊</button>
</div>
methods:{
setMsg(val){
this.$parent.toValue(this.msg);
}
}三、兄弟之間傳參
兄弟組件之間的數(shù)據(jù)傳遞，通過eventBus來做中間的橋梁，傳輸方通過中間組件調用 emit 傳數(shù)據(jù)，接收方通過on 接受數(shù)據(jù)，兩者之間的自定義屬性名保持一致。
// 傳輸方組件調用方式
import Bus from '@/EventBus.js'
Bus.$emit('pass-value', this.say);
// 接收方接受參數(shù)
import Bus from '@/EventBus.js'
created() {
Bus.$on('pass-value', val => {
this.sibilingValue = val;
})
}四 $attrs/$listeners隔代組件傳值（爺孫組件參數(shù)互傳）
- $attrs
1.包含了父作用域中不被 prop 所識別 (且獲取) 的特性綁定 (class 和 style 除外);
2.當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind=“$attrs” 傳入內部組件。通常配合 interitAttrs 選項一起使用。 - $listeners
1.包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。
2.它可以通過 v-on=“$listeners” 傳入內部組件。 - 簡單來說：$attrs 與$listeners是兩個對象，$attrs 里存放的是父組件中綁定的非 Props 屬性，$listeners 里存放的是父組件中綁定的非原生事件。
爺傳孫（$attrs）
//爺組件
<div id="app">
<Home :msg="msg"></Home>
</div>
//父組件(父組件的操作最簡單，但不做就會傳不過去)
<div class="home">
<Sun v-bind="$attrs"></Sun>
</div>
//孫組件
<div class="sun">
{{ msg }}
</div>
//props直接接受
props:{ msg:String, }孫傳爺（$listeners）
//爺組件
<div id="app">
<Home @setVal="setVal">></Home>
</div>
methods:{ setVal(val){ this.msg = val; } }
//父組件(父組件的操作最簡單，但不做就會傳不過去)
<div class="home">
<Sun v-on="$listeners"></Sun>
</div>
//孫組件
<div class="sun">
<button @click="toVal">點我</button>
</div>
methods:{ toVal(){ this.$emit("setVal",this.msg) } }五、通過Vuex數(shù)據(jù)共享
通過Vuex存儲數(shù)據(jù)， Vuex是一個專為vue.js 應用程序開發(fā)的狀態(tài)管理模式， 它采用集中式存儲管理數(shù)據(jù)，以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生改變， 一變全變，同步更新數(shù)據(jù)。
// 注冊代碼
const store = new Vue.Store({
state:{
count: 100
},
mutations: {
addCount(state, val = 1) {
state.count += val;
}，
subCount(state, val = 1) {
state.count -= val;
}
}
})
// 組件調用
this.$store.commit('addCount'); // 加 1
this.$store.commit('subCount'); // 減 1到此這篇關于vue組件常用的父子、兄弟、跨組件等傳值方法的文章就介紹到這了,更多相關vue組件的傳值方法(父子\兄弟\跨組件)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
基于vue-cli3創(chuàng)建libs庫的實現(xiàn)方法
這篇文章主要介紹了基于vue-cli3創(chuàng)建libs庫的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
基于better-scroll 實現(xiàn)歌詞聯(lián)動功能的代碼
BetterScroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件，BetterScroll 是使用純 JavaScript 實現(xiàn)的，這意味著它是無依賴的。本文基于better-scroll 實現(xiàn)歌詞聯(lián)動功能，感興趣的朋友跟隨小編一起看看吧2020-05-05
這篇文章主要介紹了為大家函數(shù)式組件劫持替代json封裝element表格的過程思路及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vue 3 響應式系統(tǒng)中ref 在 reactive 中的自動解包行為
Vue3中,ref與reactive配合使用時會自動解包,使代碼更簡潔,響應式系統(tǒng)更智能,替換ref會斷開舊連接,淺層reactive/shallowRef不觸發(fā)解包,但是需注意區(qū)分,下面通過示例給大家介紹Vue3響應式探秘：ref 在reactive中的自動解包行為解析,感興趣的朋友一起看看吧2025-07-07
這篇文章主要介紹了vue2 webpack proxy與nginx配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Axios?是一個基于?promise?的網(wǎng)絡請求庫，可以用于瀏覽器和?node.js，是一個第三方插件，第三方異步請求工具庫，這篇文章主要介紹了Axios在vue項目中的封裝方法,需要的朋友可以參考下2022-10-10
Vue表格首列相同數(shù)據(jù)合并實現(xiàn)方法
這篇文章主要介紹了Vue實現(xiàn)表格首列相同數(shù)據(jù)合并的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
這篇文章主要給大家介紹了關于vue中輕量級模糊查詢fuse.js使用方法的相關資料,Fuse.js是一個功能強大、輕量級的模糊搜索庫,通過提供簡單的?api?調用,達到強大的模糊搜索效果,需要的朋友可以參考下2024-01-01
Vue項目打包成exe可執(zhí)行文件的實現(xiàn)過程(無瑕疵,完美版)
突然接到公司需求,說客戶想讓我們把項目直接打包,所以下面這篇文章主要給大家介紹了關于Vue項目打包成exe可執(zhí)行文件的實現(xiàn)過程,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要給大家介紹了關于如何使用Vue進行文件預覽與打印功能的相關資料,這個功能其實也是自己學習到的,做完也有一段時間了,一直想記錄總結一下,需要的朋友可以參考下2023-10-10