組件是 vue.js 最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引用千扔。那么組件間如何通信逛揩，也就成為了vue中重點(diǎn)知識(shí)了。這篇文章將會(huì)通過(guò)props杖狼、
emit 這幾個(gè)知識(shí)點(diǎn)，來(lái)講解如何實(shí)現(xiàn)父子組件間通信。
在說(shuō)如何實(shí)現(xiàn)通信之前耳峦，我們先來(lái)建兩個(gè)組件father.vue和child.vue作為示例的基礎(chǔ)。
//父組件
<template>
<div>
<h1>我是父組件焕毫！</h1>
<child></child>
</div>
</template>
<script>
import Child from '../components/child.vue'
export default {
components: {Child},
}
</script>
//子組件
<template>
<h3>我是子組件蹲坷！</h3>
</template>
<script>
</script>
這兩部分的代碼都很清晰明了驶乾，父組件通過(guò)import的方式導(dǎo)入子組件，并在components屬性中注冊(cè)循签，然后子組件就可以用標(biāo)簽<child>的形式嵌進(jìn)父組件了级乐。運(yùn)行father.vue后的效果是這樣的：
1.通過(guò)prop實(shí)現(xiàn)通信
子組件的props選項(xiàng)能夠接收來(lái)自父組件數(shù)據(jù)。沒(méi)錯(cuò)县匠，僅僅只能接收风科，props是單向綁定的，即只能父組件向子組件傳遞乞旦，不能反向贼穆。而傳遞的方式也分為兩種：
（1）靜態(tài)傳遞
子組件通過(guò)props選項(xiàng)來(lái)聲明一個(gè)自定義的屬性，然后父組件就可以在嵌套標(biāo)簽的時(shí)候兰粉，通過(guò)這個(gè)屬性往子組件傳遞數(shù)據(jù)了故痊。
<!-- 父組件 -->
<template>
<div>
<h1>我是父組件！</h1>
<child message="我是子組件一玖姑！"></child> //通過(guò)自定義屬性傳遞數(shù)據(jù)
</div>
</template>
<script>
import Child from '../components/child.vue'
export default {
components: {Child},
}
</script>
<!-- 子組件 -->
<template>
<h3>{{message}}</h3>
</template>
<script>
export default {
props: ['message'] //聲明一個(gè)自定義的屬性
}
</script>
（2）動(dòng)態(tài)傳遞
我們已經(jīng)知道了可以像上面那樣給 props 傳入一個(gè)靜態(tài)的值愕秫，但是我們更多的情況需要?jiǎng)討B(tài)的數(shù)據(jù)。這時(shí)候就可以用 v-bind 來(lái)實(shí)現(xiàn)焰络。通過(guò)v-bind綁定props的自定義的屬性戴甩，傳遞去過(guò)的就不是靜態(tài)的字符串了，它可以是一個(gè)表達(dá)式闪彼、布爾值甜孤、對(duì)象等等任何類(lèi)型的值。
<!-- 父組件 -->
<template>
<div>
<h1>我是父組件备蚓！</h1>
<child message="我是子組件一课蔬！"></child>
<!-- 這是一個(gè) JavaScript 表達(dá)式而不是一個(gè)字符串。-->
<child v-bind:message="a+b"></child>
<!-- 用一個(gè)變量進(jìn)行動(dòng)態(tài)賦值郊尝。-->
<child v-bind:message="msg"></child>
</div>
</template>
<script>
import Child from '../components/child.vue'
export default {
components: {Child},
data() {
return {
a:'我是子組件二二跋！',
b:112233,
msg: '我是子組件三！'+ Math.random()
}
}
}
</script>
<!-- 子組件 -->
<template>
<h3>{{message}}</h3>
</template>
<script>
export default {
props: ['message']
}
</script>
出來(lái)的效果是這樣的：
2.通過(guò)$ref 實(shí)現(xiàn)通信
對(duì)于ref官方的解釋是：ref 是被用來(lái)給元素或子組件注冊(cè)引用信息的流昏。引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上扎即。
看不懂對(duì)吧？很正常况凉，我也看不懂谚鄙。那應(yīng)該怎么理解？看看我的解釋?zhuān)?/p>
- 如果ref用在子組件上刁绒，指向的是組件實(shí)例闷营，可以理解為對(duì)子組件的索引，通過(guò)$ref可能獲取到在子組件里定義的屬性和方法。
- 如果ref在普通的 DOM 元素上使用傻盟，引用指向的就是 DOM 元素速蕊，通過(guò)$ref可能獲取到該DOM 的屬性集合，輕松訪(fǎng)問(wèn)到DOM元素娘赴，作用與JQ選擇器類(lèi)似规哲。
那如何通過(guò)ref實(shí)現(xiàn)一遍：
<!-- 父組件 -->
<template>
<div>
<h1>我是父組件唉锌！</h1>
<child ref="msg"></child>
</div>
</template>
<script>
import Child from '../components/child.vue'
export default {
components: {Child},
mounted: function () {
console.log( this.$refs.msg);
this.$refs.msg.getMessage('我是子組件一！')
}
}
</script>
<!-- 子組件 -->
<template>
<h3>{{message}}</h3>
</template>
<script>
export default {
data(){
return{
message:''
}
},
methods:{
getMessage(m){
this.message=m;
}
}
}
</script>
從上面的代碼我們可以發(fā)現(xiàn)竿奏，通過(guò)ref=‘msg’可以將子組件child的實(shí)例指給refs.msg);”打印出來(lái)的內(nèi)容痘番，這可以讓大家更加了解，究竟通過(guò)ref我們獲取了什么：
最后的效果是這樣的：
這里再補(bǔ)充一點(diǎn)就是平痰，prop和$ref之間的區(qū)別：
- prop 著重于數(shù)據(jù)的傳遞，它并不能調(diào)用子組件里的屬性和方法伍纫。像創(chuàng)建文章組件時(shí)宗雇，自定義標(biāo)題和內(nèi)容這樣的使用場(chǎng)景，最適合使用prop莹规。
- $ref 著重于索引赔蒲，主要用來(lái)調(diào)用子組件里的屬性和方法，其實(shí)并不擅長(zhǎng)數(shù)據(jù)傳遞良漱。而且ref用在dom元素的時(shí)候舞虱，能使到選擇器的作用，這個(gè)功能比作為索引更常有用到母市。
3.通過(guò)$emit 實(shí)現(xiàn)通信
上面兩種示例主要都是父組件向子組件通信矾兜，而通過(guò)emit官網(wǎng)上也是解釋得很朦朧患久，我按我自己的理解是這樣的:
vm.emit 綁定一個(gè)自定義事件event椅寺，當(dāng)這個(gè)這個(gè)語(yǔ)句被執(zhí)行到的時(shí)候，就會(huì)將參數(shù)arg傳遞給父組件蒋失，父組件通過(guò)@event監(jiān)聽(tīng)并接收參數(shù)返帕。
<template>
<div>
<h1>{{title}}</h1>
<child @getMessage="showMsg"></child>
</div>
</template>
<script>
import Child from '../components/child.vue'
export default {
components: {Child},
data(){
return{
title:''
}
},
methods:{
showMsg(title){
this.title=title;
}
}
}
</script>
<template>
<h3>我是子組件！</h3>
</template>
<script>
export default {
mounted: function () {
this.$emit('getMessage', '我是父組件篙挽！')
}
}
</script>
作者：四小七
鏈接：http://www.reibang.com/p/91416e11f012
來(lái)源：簡(jiǎn)書(shū)
