vue組件常用的父子、兄弟、跨組件等傳值方法
更新時(shí)間：2023年12月02日 09:56:34 作者：冷r
Vue常用的三種傳值方式有:??父?jìng)髯??子傳父??非父子傳值?引用官網(wǎng)的一句話:父子組件的關(guān)系可以總結(jié)為?prop?向下傳遞,事件向上傳遞,熟悉vue各類關(guān)系的組件之間傳值方法會(huì)令開發(fā)更加得心應(yīng)手,下面將對(duì)父子、兄弟、頁(yè)級(jí)組件之間的傳值作淺談
一、props/$emit父子組件傳值：
父?jìng)髯?(自定義屬性 props)
父組件向子組件傳參，通過自定義屬性的方式進(jìn)行傳參，在子組件中使用prop定義自定義的屬性，然后在父組件中通過v-bind指令把需要傳遞的數(shù)據(jù)綁定在子組件上，那在子組件中props里面的自定義屬性可以直接使用。
//父組件代碼 渲染子組件
<Son :name="name" />
// 子組件代碼，接受父參數(shù)
export default {
props: {
name:{
type:String,
default:"我是默認(rèn)字符串"http://定義參數(shù)默認(rèn)值
required:false//定義參數(shù)是否必須值
}
}
}
子傳父 (自定義事件 this.$emit)
子組件向父組件傳數(shù)據(jù)使用自定義事件， vue 組件提供了一個(gè)emit(‘自定義事件名’， 傳遞的數(shù)據(jù)) )，子組件傳遞數(shù)據(jù)時(shí)，觸發(fā)響應(yīng)的事件函數(shù)，就會(huì)自動(dòng)觸發(fā)通過$emit給父組件綁定的自定義事件，自定義事件接受一個(gè)參數(shù)，參數(shù)就是子組件傳遞過來的數(shù)據(jù)。
// 父組件代碼，渲染子組件
<Son @setValue="valueFn" />
export default{
method:{
valueFn(value) {}
}
}
// 子組件代碼
this.$emit('setValue', this.say)
二、ref與parent/children父子組件傳值:
父?jìng)髯?/h3>
//父組件
<Home ref="home"></Home>
<button @click="toValue">點(diǎn)擊</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">點(diǎn)擊</button>
</div>
methods:{
setMsg(val){
this.$parent.toValue(this.msg);
}
}三、兄弟之間傳參
兄弟組件之間的數(shù)據(jù)傳遞，通過eventBus來做中間的橋梁，傳輸方通過中間組件調(diào)用 emit 傳數(shù)據(jù)，接收方通過on 接受數(shù)據(jù)，兩者之間的自定義屬性名保持一致。
// 傳輸方組件調(diào)用方式
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 所識(shí)別 (且獲取) 的特性綁定 (class 和 style 除外);
2.當(dāng)一個(gè)組件沒有聲明任何 prop 時(shí)，這里會(huì)包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind=“$attrs” 傳入內(nèi)部組件。通常配合 interitAttrs 選項(xiàng)一起使用。 - $listeners
1.包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。
2.它可以通過 v-on=“$listeners” 傳入內(nèi)部組件。 - 簡(jiǎn)單來說：$attrs 與$listeners是兩個(gè)對(duì)象，$attrs 里存放的是父組件中綁定的非 Props 屬性，$listeners 里存放的是父組件中綁定的非原生事件。
爺傳孫（$attrs）
//爺組件
<div id="app">
<Home :msg="msg"></Home>
</div>
//父組件(父組件的操作最簡(jiǎn)單，但不做就會(huì)傳不過去)
<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; } }
//父組件(父組件的操作最簡(jiǎn)單，但不做就會(huì)傳不過去)
<div class="home">
<Sun v-on="$listeners"></Sun>
</div>
//孫組件
<div class="sun">
<button @click="toVal">點(diǎn)我</button>
</div>
methods:{ toVal(){ this.$emit("setVal",this.msg) } }五、通過Vuex數(shù)據(jù)共享
通過Vuex存儲(chǔ)數(shù)據(jù)， Vuex是一個(gè)專為vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式， 它采用集中式存儲(chǔ)管理數(shù)據(jù)，以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生改變， 一變?nèi)?，同步更新?shù)據(jù)。
// 注冊(cè)代碼
const store = new Vue.Store({
state:{
count: 100
},
mutations: {
addCount(state, val = 1) {
state.count += val;
}，
subCount(state, val = 1) {
state.count -= val;
}
}
})
// 組件調(diào)用
this.$store.commit('addCount'); // 加 1
this.$store.commit('subCount'); // 減 1到此這篇關(guān)于vue組件常用的父子、兄弟、跨組件等傳值方法的文章就介紹到這了,更多相關(guān)vue組件的傳值方法(父子\兄弟\跨組件)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3實(shí)現(xiàn)下拉選擇框多選功能的方法詳解
在vue的實(shí)際開發(fā)過程中,我們?nèi)绾螌⒁赃x中的值直接渲染到頁(yè)面中,下面這篇文章主要給大家介紹了關(guān)于Vue3實(shí)現(xiàn)下拉選擇框多選功能的相關(guān)資料,需要的朋友可以參考下2023-09-09
本文給大家分享vue自定義組件的四種方式，通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-02-02
Vue3?計(jì)算屬性computed的實(shí)現(xiàn)原理
這篇文章主要介紹了Vue3?計(jì)算屬性computed的實(shí)現(xiàn)原理，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08
Vite是一款非常輕量級(jí)的Web開發(fā)框架，它可以幫助開發(fā)者快速搭建一個(gè)開發(fā)環(huán)境。Vite搭建的開發(fā)環(huán)境可以提供更快的編譯速度，更少的配置，更好的性能和更多的開發(fā)者友好性，使開發(fā)者可以更快地構(gòu)建出功能強(qiáng)大的Web應(yīng)用程序。2023-02-02
vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Grid拖拽布局
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Grid拖拽布局,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
Element-Plus之el-col與el-row快速布局
el-col是el-row的子元素,下面這篇文章主要給大家介紹了關(guān)于Element-Plus之el-col與el-row快速布局的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Vue+element 解決瀏覽器自動(dòng)填充記住的賬號(hào)密碼問題
我們?cè)谧鰂orm表單的時(shí)候,會(huì)發(fā)現(xiàn),瀏覽器會(huì)自動(dòng)的將我們之前保存的密碼,自動(dòng)的填充到表單中input 為 type="password" 的框中，如何實(shí)現(xiàn)此功能呢，下面小編給大家介紹下，感興趣的朋友一起看看吧2019-06-06
Vue項(xiàng)目部署到j(luò)enkins的實(shí)現(xiàn)
本文主要介紹了Vue項(xiàng)目部署到j(luò)enkins的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
本文主要介紹了npm install sentry-cli失敗的問題解決,文章首先描述了問題現(xiàn)象,然后分析了問題的原因,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)下拉加載更多，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05