vue組件常用的父子、兄弟、跨組件等傳值方法
更新時間：2023年12月02日 09:56:34 作者：冷r
Vue常用的三種傳值方式有:??父傳子??子傳父??非父子傳值?引用官網的一句話:父子組件的關系可以總結為?prop?向下傳遞,事件向上傳遞,熟悉vue各類關系的組件之間傳值方法會令開發(fā)更加得心應手,下面將對父子、兄弟、頁級組件之間的傳值作淺談
一、props/$emit父子組件傳值：
父傳子 (自定義屬性 props)
父組件向子組件傳參，通過自定義屬性的方式進行傳參，在子組件中使用prop定義自定義的屬性，然后在父組件中通過v-bind指令把需要傳遞的數(shù)據綁定在子組件上，那在子組件中props里面的自定義屬性可以直接使用。
//父組件代碼 渲染子組件
<Son :name="name" />
// 子組件代碼，接受父參數(shù)
export default {
props: {
name:{
type:String,
default:"我是默認字符串"http://定義參數(shù)默認值
required:false//定義參數(shù)是否必須值
}
}
}
子傳父 (自定義事件 this.$emit)
子組件向父組件傳數(shù)據使用自定義事件， vue 組件提供了一個emit(‘自定義事件名’， 傳遞的數(shù)據) )，子組件傳遞數(shù)據時，觸發(fā)響應的事件函數(shù)，就會自動觸發(fā)通過$emit給父組件綁定的自定義事件，自定義事件接受一個參數(shù)，參數(shù)就是子組件傳遞過來的數(shù)據。
// 父組件代碼，渲染子組件
<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ù)據傳遞，通過eventBus來做中間的橋梁，傳輸方通過中間組件調用 emit 傳數(shù)據，接收方通過on 接受數(shù)據，兩者之間的自定義屬性名保持一致。
// 傳輸方組件調用方式
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ù)據共享
通過Vuex存儲數(shù)據， Vuex是一個專為vue.js 應用程序開發(fā)的狀態(tài)管理模式， 它采用集中式存儲管理數(shù)據，以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生改變， 一變全變，同步更新數(shù)據。
// 注冊代碼
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的實際開發(fā)過程中,我們如何將以選中的值直接渲染到頁面中,下面這篇文章主要給大家介紹了關于Vue3實現(xiàn)下拉選擇框多選功能的相關資料,需要的朋友可以參考下2023-09-09
本文給大家分享vue自定義組件的四種方式，通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2020-02-02
這篇文章主要介紹了Vue3?計算屬性computed的實現(xiàn)原理，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
Vite是一款非常輕量級的Web開發(fā)框架，它可以幫助開發(fā)者快速搭建一個開發(fā)環(huán)境。Vite搭建的開發(fā)環(huán)境可以提供更快的編譯速度，更少的配置，更好的性能和更多的開發(fā)者友好性，使開發(fā)者可以更快地構建出功能強大的Web應用程序。2023-02-02
這篇文章主要為大家詳細介紹了如何利用vue實現(xiàn)一個簡單的Grid拖拽布局,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
Element-Plus之el-col與el-row快速布局
el-col是el-row的子元素,下面這篇文章主要給大家介紹了關于Element-Plus之el-col與el-row快速布局的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
Vue+element 解決瀏覽器自動填充記住的賬號密碼問題
我們在做form表單的時候,會發(fā)現(xiàn),瀏覽器會自動的將我們之前保存的密碼,自動的填充到表單中input 為 type="password" 的框中，如何實現(xiàn)此功能呢，下面小編給大家介紹下，感興趣的朋友一起看看吧2019-06-06
本文主要介紹了Vue項目部署到jenkins的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
本文主要介紹了npm install sentry-cli失敗的問題解決,文章首先描述了問題現(xiàn)象,然后分析了問題的原因,具有一定的參考價值,感興趣的可以了解一下2023-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)下拉加載更多，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05