vue中組件之間相互通信傳值的幾種方法詳解
更新時(shí)間：2022年02月28日 11:28:52 作者：75624839
這篇文章主要為大家詳細(xì)介紹了vue中組件之間相互通信傳值的幾種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
vue中組件之間相互通訊傳值的方式
我們?cè)谑褂胿ue進(jìn)行項(xiàng)目開發(fā)的時(shí)候?yàn)榱烁玫毓芾眄?xiàng)目，我們會(huì)把每個(gè)功能封裝成一個(gè)個(gè)的組件，在使用的時(shí)候直接引入并且調(diào)用組件來實(shí)現(xiàn)代碼的復(fù)用。
我們?cè)诜庋b組件的時(shí)候經(jīng)常會(huì)留有一些預(yù)留的接口，供使用的時(shí)候調(diào)用和傳入不同的數(shù)據(jù)，這個(gè)時(shí)候我們就涉及到了組件之前的相互傳值的問題。
我這里總結(jié)了在vue中組件之前相互傳值的方法：
1、子組件和父組件通訊，通過調(diào)用父組件給組件自定義屬性值來實(shí)現(xiàn)
<!--parent.vue-->
<template>
<div>
<h4>我是父組件：</h4>
<p>這是我自己的數(shù)據(jù){{num}}</p>
<!--通過給子組件傳入自定義屬性值，傳數(shù)據(jù)用v-bind或者簡(jiǎn)寫形式:號(hào)， 傳方法可以使用v-on或者簡(jiǎn)寫@符綁定事件-->
<child :p-num="num" :p-num2="num2" @changePNum="changeNum" />
</div>
</template>
<script>
import child from './child.vue'
export default{
name: 'parent',
data(){
return{
num: 10,
num2: 20
}
},
methods:{
changeNum(n){
this.num = n;
}
}
}
</script>
<!--child.vue-->
<template>
<div>
<h4>我是子組件：</h4>
<!--第一種可以使用props對(duì)象來接收父級(jí)傳過來的屬性-->
<p>這是通過props接收父級(jí)組件傳過來的數(shù)據(jù){{ pNum}}</p>
<!--第二種是通過元素的實(shí)例屬性$attrs獲取，沒有唄props接收的剩余屬性-->
<p>這是通過組件中的$attrs對(duì)象獲取父級(jí)組件傳過來的數(shù)據(jù){{ $attrs['p-num2']}}</p>
<!--第三種是通過當(dāng)前實(shí)例中的$parent屬性拿到父級(jí)實(shí)例對(duì)象-->
<p>這是通過組件中的$attrs對(duì)象獲取父級(jí)組件傳過來的數(shù)據(jù){{ topNum }}</p>
<button @click="changeNum">通過$emit改變父級(jí)的數(shù)據(jù)</button>
<button @click="changeNum2">通過$listeners改變父級(jí)的數(shù)據(jù)</button>
<button @click="changeNum3">通過$parent改變父級(jí)的數(shù)據(jù)</button>
</div>
</template>
<script>
export default{
name: 'child',
// 第一種可以使用props對(duì)象來接收父級(jí)傳過來的屬性
props:{
// 這里寫對(duì)應(yīng)的要接收的屬性名以駝峰的形式接收
pNum: {
type: Number
}
},
data(){
return {
topNum: 0
}
},
created(){
// 通過使用實(shí)例中的$parent拿到父級(jí)組件的實(shí)例，然后獲取值
this.topNum = this.$parent.num;
},
methods:{
changeNum(){
// 這里是通過當(dāng)前組件中的$emit方法來調(diào)用父級(jí)傳過來的方法，并且可以傳入?yún)?shù)
this.$emit('changePNum', 40);
},
changeNum2(){
// 通過組件中的$listeners中的存儲(chǔ)的父級(jí)傳過來的方法進(jìn)行調(diào)用
this.$listeners.changePNum(50);
},
changeNum3(){
// 通過組件中的$listeners中的存儲(chǔ)的父級(jí)傳過來的方法進(jìn)行調(diào)用
this.$parent.changeNum(60);
}
}
}
</script>
上邊的代碼展示了兩種不同形式的組件之間的通訊方式，父組件傳值方式相同，子組件獲取操作方式不同
1.props/$emit組合方式：子組件通過定義props值拿到父組件傳給子組件的屬性來獲??；子組件通過使用$emit方法調(diào)用父組件的方法；
2.$attrs/$listeners組合方式：子組件可以通過$attrs屬性中的值拿到父組件傳給子組件的屬性值，它里邊存儲(chǔ)的是props之外的屬性值；
3.$parent方法獲取父組件中的數(shù)據(jù)和方法
2、父組件主動(dòng)獲取子組件數(shù)據(jù)
<!--parent-->
<template>
<div>
<button @click="changeChildANum">通過$refs調(diào)用子組件方法更改子組件數(shù)據(jù)</button>
<button @click="changeChildBNum">通過$children調(diào)用子組件方法更改子組件數(shù)據(jù)</button>
<p>這是獲取的子組件childA的數(shù)據(jù)：{{childA_num}}</p>
<p>這是獲取的子組件childB的數(shù)據(jù)：{{childB_num}}</p>
<!--這里通過使用ref把組件示例注冊(cè)到當(dāng)前組件的$refs中-->
<child-a ref="childA"/>
<child-b />
</div>
</template>
<script>
import childA from './childA.vue';
import childB from './childA.vue';
export default{
components:{
childA,
childB
},
data(){
return {
childA_num: 0,
childB_num: 0
}
},
created(){},
mounted(){
// $refs 和 $children 都是需要在mounted中才能獲取到
// 這里通過$refs獲取注冊(cè)在里邊的子組件實(shí)例，并且獲取他的數(shù)據(jù)
this.childA_num = this.$refs.childA.num
// 第二種方式通過當(dāng)前組件示例中的$children獲取子組件實(shí)例
this.childB_num = this.$children[1].num;
},
methods:{
changeChildANum(){
// 這里通過使用$refs中的組件實(shí)例調(diào)用組件中的方法
this.$refs.childA.changeNum();
},
changeChildBNum(){
// 這里通過使用$refs中的組件實(shí)例調(diào)用組件中的方法
this.$children[1].changeNum();
}
}
}
</script>
<!--child-->
<template>
<div></div>
</template>
<script>
export default{
name: 'childA',
data(){
return{
num: 10
}
},
methods:{
changeNum(){
this.num++;
}
}
}
</script>
1.ref/$refs方式，通過給引入的組件定義一個(gè)ref屬性，然后就可以通過$refs結(jié)合該屬性值得到當(dāng)前組件的實(shí)例
2.ref/$children屬性，給組件定義ref值后，當(dāng)前組件實(shí)例中會(huì)在this.$children中拿到所有定義了ref的組件數(shù)組，我們?cè)谕ㄟ^下標(biāo)進(jìn)行獲取某個(gè)子組件的方法后者屬性值。
3、使用provide/inject方法實(shí)現(xiàn)
<!--parent.vue-->
<template>
<div>
<child />
</div>
</template>
<script>
import child from './child.vue';
export default{
// 通過給父級(jí)定義一個(gè)provide對(duì)象，并且定義成一個(gè)函數(shù)形式，然后返回一個(gè)parentData對(duì)象，并且對(duì)象指向當(dāng)前組件的一個(gè)數(shù)據(jù)對(duì)象上，這樣相當(dāng)于都指向一個(gè)對(duì)象
provide(){
return {
parentData: this.proVideData
}
}
name: 'Parent',
components:{
child
},
data(){
return{
proVideData: {
num, 1,
changeNum: null
}
}
},
created(){
// 然后通過實(shí)例化后把需要被子組件調(diào)用到的方法傳入進(jìn)去
this.proVideData.changeNum = this.changeNum;
},
methods:{
changeNum(){
this.proVideData.num++;
}
}
}
</script>
<!--child.vue-->
<template>
<div>
<p>{{parentData.num}}</p>
<button @click="parFun">調(diào)用父級(jí)的方法</button>
</div>
</template>
<script>
export default{
// 子組件通過inject接到祖先組件中的provide廣播的數(shù)據(jù)
inject:['parentData'],
name: 'child',
data(){
return{
}
},
methods:{
parFun(){
// 這里直接執(zhí)行存儲(chǔ)下來的方法
this.parentData.changeNun();
}
}
}
</script>
這種方式適合層級(jí)比較深的組件傳值，這里的基本原理是，通過給祖先組件配置provide屬性，然后把想要傳給后代組件的屬性值，進(jìn)行存儲(chǔ)；
然后在后代組件中，那個(gè)需要拿到傳播的數(shù)據(jù)，可以給組件本身配置injuct屬性，來接收想要監(jiān)聽的數(shù)據(jù)值；
然后就可以進(jìn)行通信了
4、使用事件總線
此方發(fā)可以在任意組件中進(jìn)行監(jiān)聽當(dāng)前定義的方法。來實(shí)現(xiàn)，組件間相互通信
<!--event-bus.js-->
import Vue from 'vue';
// 這里從創(chuàng)建了一個(gè)新的vue實(shí)例對(duì)象
export const EventBus = new Vue();
<!--parent.vue-->
<template>
<div>
</div>
</template>
<script>
// 這里引入事件總線
import { EventBus } from './event-bus';
export default{
data(){
return{
eventBusMsg: ''
}
},
created(){
// 然后給事件總線綁定一個(gè)需要監(jiān)聽的方法，類似于發(fā)布訂閱者的增加訂閱
EventBus.$on("eventBusMsg", (msg) => {
console.log(msg);
this.eventBusMsg = msg;
});
},
beforeDestroy(){
EventBus.$small("eventBusMsg");
}
}
</script>
<!--sub.vue后代組件-->
<template>
<div>
<button @click="eventBusChange">通過事件總線調(diào)用組件的方法</button>
</div>
</template>
<script>
// 其他組件也需要你引入該插件
import { EventBus } from './event-bus';
export default{
data(){
},
created(){
},
methods:{
eventBusChange(){
//這里是通過eventBus來調(diào)用一個(gè)訂閱的消息方法，并傳入值過去
EventBus.$emit('eventBusMsg', 'childB');
}
}
}
</script>
事件總線的調(diào)用方式是:
1.定義一個(gè)全局的vue示例并導(dǎo)出;
2.然后在需要監(jiān)聽某個(gè)事件的組件中引入event-bus
3.給當(dāng)前的組件在created方法中增加方法
4.然后子組件可以通過引入event-bus文件然后通過EventBus.$emit方式執(zhí)行監(jiān)聽的時(shí)間方法
5、vuex\localStorage\sessionStorage
還可以使用Vuex、本地存儲(chǔ)等方式來實(shí)現(xiàn)全局公用。
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄
這篇文章主要介紹了vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue父組件監(jiān)聽子組件生命周期,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了VUE如何將方法名字作為變量進(jìn)行調(diào)用問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了關(guān)于element-ui圖片上傳組件查看和限制方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue實(shí)現(xiàn)點(diǎn)擊顯示不同圖片的效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)點(diǎn)擊顯示不同圖片的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要介紹了滑動(dòng)穿透(鎖body)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
詳解Vue+axios+Node+express實(shí)現(xiàn)文件上傳(用戶頭像上傳)
這篇文章主要介紹了詳解Vue+axios+Node+express實(shí)現(xiàn)文件上傳(用戶頭像上傳)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue.js常用指令的使用，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了vue中的過濾器及其時(shí)間格式化,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
Vue中的請(qǐng)求攔截器和響應(yīng)攔截器用法及說明
這篇文章主要介紹了Vue中的請(qǐng)求攔截器和響應(yīng)攔截器用法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05