溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
平時(shí)在使用Vue框架的業(yè)務(wù)開發(fā)中，組件不僅僅要把模板的內(nèi)容進(jìn)行復(fù)用，更重要的是組件之間要進(jìn)行通信。組件之間通信分為三種：父-子；子-父；跨級(jí)組件通信。下面，就組件間如何通信做一些總結(jié)。
1.父組件到子組件通過(guò)props通信
在組件中，使用選項(xiàng)props來(lái)聲明需要從父級(jí)組件接受的數(shù)據(jù)，props的值可以是兩種：一種是字符串?dāng)?shù)組，一種是對(duì)象。props中聲明的數(shù)據(jù)與組件data函數(shù)return的主要區(qū)別在于props來(lái)自父級(jí)，而data中的組件是自己的數(shù)據(jù)，作用域是組件本身，這兩種數(shù)據(jù)都可以在模板template及計(jì)算屬性computed和方法methods中使用。如以下例子：
// 父組件 ParentComponent
<template>
<div class="parent-component">
<h3>這是一個(gè)父組件</h3>
<ChildComponent :parentMessage="parentMessage"/>
</div>
</template>
<script>
import ChildComponent from './ChildComponent'
export default {
name: "ParentComponent",
data(){
return{
parentMessage:'這是來(lái)自父組件的數(shù)據(jù)'
}
},
components:{
ChildComponent
}
}
</script>
// 子組件 ChildComponent
<template>
<div class="child-component">
<h3>這是一個(gè)子組件</h3>
<h4>{{parentMessage}}</h4>
</div>
</template>
<script>
export default {
name: "ChildComponent",
props:["parentMessage"]
}
</script>
小結(jié)：父組件傳遞個(gè)子組件的數(shù)據(jù)可以寫死，也可以用父級(jí)的動(dòng)態(tài)數(shù)據(jù)用v-bind來(lái)綁定props的值。
2.子組件到父組件通過(guò)$emit，$on通信
當(dāng)子組件需要向父組件傳遞數(shù)據(jù)時(shí)，就要用到自定義事件，v-on指令除了監(jiān)聽DOM事件外，還可以用于組件間的自定義事件，Vue組件有一套類似與觀察者模式的一套模式，子組件用$emit()來(lái)觸發(fā)事件，父組件用$on()來(lái)監(jiān)聽子組件的事件。舉個(gè)例子如下：
// ParentComponent 父組件
<template>
<div class="parent-component">
<h3>這是一個(gè)父組件total:{{total}}</h3>
<ChildComponent :parentMessage="parentMessage" :total="total" @handleAdd10="getTotal"/>
</div>
</template>
<script>
import ChildComponent from './ChildComponent'
export default {
name: "ParentComponent",
data(){
return{
parentMessage:'這是來(lái)自父組件的數(shù)據(jù)',
total:10,
}
},
components:{
ChildComponent
},
methods:{
getTotal(total){
this.total=total;
console.log('ParentComponent total:',total);
}
}
}
</script>
// ChildComponent 子組件
<template>
<div class="child-component">
<h3>這是一個(gè)子組件</h3>
<h4>{{parentMessage}}</h4>
<button @click="handleAdd10">+10按鈕</button>
</div>
</template>
<script>
export default {
name: "ChildComponent",
props:["parentMessage","total"],
methods:{
handleAdd10(){
let total=this.total+10;
console.log('ChildComponent $emit:');
this.$emit('handleAdd10',total);
}
}
}
</script>
結(jié)果：
上面例子中，子組件有一個(gè)按鈕，實(shí)現(xiàn)加10的效果，子組件通過(guò)props項(xiàng)來(lái)接收父組件傳入的total值，在改變total后，通過(guò)$emit把它傳給父組件，父組件定義事件@handleAdd10方法，子組件$emit()方法第一個(gè)參數(shù)是自定義事件的名稱，后面的參數(shù)是要傳的數(shù)據(jù)，對(duì)應(yīng)的父組件通過(guò)getTotal(total)來(lái)接收子組件傳遞的數(shù)據(jù)，由此子組件到父組件通信完成。
3.表單子組件到父組件通過(guò)v-model來(lái)通信(語(yǔ)法糖)
// ParentComponent 改動(dòng)如下
**
<h3>這是一個(gè)父組件total:{{total}}</h3>
<ChildComponent :parentMessage="parentMessage" :total="total" @handleAdd10="getTotal"/>
<InputComponent v-model="total"/>
**
<script>
import InputComponent from './InputComponent'
</script>
**
// InputComponent 子組件
<template>
<input type="text" @input="updateValue($event)">
</template>
<script>
export default {
name: "InputComponent",
methods:{
updateValue(evt){
this.$emit('input',evt.target.value)
}
}
}
</script>
結(jié)果如下：
以上示例中：因?yàn)樽咏M件的石建明是特殊的input，在使用組件的父級(jí)，可以通過(guò)v-model來(lái)綁定數(shù)據(jù)total，這種實(shí)現(xiàn)方式也可以稱作語(yǔ)法糖，大大減少了父組件代碼量。
4.非父子組件通過(guò)中央事件總線(bus)來(lái)通信
在vue.js2.x中推薦使用一個(gè)空的Vue實(shí)例作為中央事件總線（bus）,先看一個(gè)例子：
// ParentComponent 父組件
<template>
<div class="parent-component">
{{message}}
<br>
<br>
<component-a/>
</div>
</template>
<script>
import Vue from 'vue'
let bus=new Vue();
export default {
name: "ParentComponent",
data(){
return{
message:'',
}
},
components:{
componentA:{
template:'<button @click="handleClick">傳遞事件</button>',
methods:{
handleClick(){
bus.$emit('on-message','來(lái)自子組件component-a的內(nèi)容')
}
}
}
},
mounted(){
bus.$on('on-message',(msg)=>{
this.message=msg;
});
}
}
</script>
結(jié)果如下：
以上例子中：首先創(chuàng)建了一個(gè)bus的空Vue實(shí)例，里面沒有任何內(nèi)容，然后全局定義了組件component-a,，在父組件ParentChild的生命周期mounted鉤子函數(shù)中監(jiān)聽來(lái)自bus的事件on-message。而在組件component-a中，點(diǎn)擊按鈕會(huì)通過(guò)bus把事件on-message發(fā)出去，父組件會(huì)接受來(lái)自bus的事件，改變message的值。
這種方法巧妙輕量的實(shí)現(xiàn)了任何組件之間的通信，包括父子，兄弟，跨級(jí)組件。
5.狀態(tài)管理與Vuex與總結(jié)
在實(shí)際業(yè)務(wù)中，經(jīng)常會(huì)有跨組件共享數(shù)據(jù)的需求，如果項(xiàng)目不復(fù)雜，使用bus就能簡(jiǎn)單的解決問(wèn)題，但是使用bus在數(shù)據(jù)的管理、維護(hù)、架構(gòu)設(shè)計(jì)上還只是一個(gè)簡(jiǎn)單的組件，在大型單頁(yè)應(yīng)用，多然開發(fā)的項(xiàng)目中，Vuex能更加優(yōu)雅和高效的完成狀態(tài)管理。
總結(jié)
以上所述是小編給大家介紹的Vue.js組件間通信方式總結(jié)【推薦】，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼