vue之父子組件間通信實例講解(props、$ref、$emit)
組件是 vue.js 最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。那么組件間如何通信，也就成為了vue中重點知識了。這篇文章將會通過props、$ref和 $emit 這幾個知識點，來講解如何實現(xiàn)父子組件間通信。
在說如何實現(xiàn)通信之前，我們先來建兩個組件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>
這兩部分的代碼都很清晰明了，父組件通過import的方式導(dǎo)入子組件，并在components屬性中注冊，然后子組件就可以用標(biāo)簽<child>的形式嵌進父組件了。運行father.vue后的效果是這樣的：
示例效果一
1.通過prop實現(xiàn)通信
子組件的props選項能夠接收來自父組件數(shù)據(jù)。沒錯，僅僅只能接收，props是單向綁定的，即只能父組件向子組件傳遞，不能反向。而傳遞的方式也分為兩種：
（1）靜態(tài)傳遞
子組件通過props選項來聲明一個自定義的屬性，然后父組件就可以在嵌套標(biāo)簽的時候，通過這個屬性往子組件傳遞數(shù)據(jù)了。
<!-- 父組件 -->
<template>
<div>
<h1>我是父組件！</h1>
<child message="我是子組件一！"></child> //通過自定義屬性傳遞數(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'] //聲明一個自定義的屬性
}
</script>
（2）動態(tài)傳遞
我們已經(jīng)知道了可以像上面那樣給 props 傳入一個靜態(tài)的值，但是我們更多的情況需要動態(tài)的數(shù)據(jù)。這時候就可以用 v-bind 來實現(xiàn)。通過v-bind綁定props的自定義的屬性，傳遞去過的就不是靜態(tài)的字符串了，它可以是一個表達(dá)式、布爾值、對象等等任何類型的值。
<!-- 父組件 -->
<template>
<div>
<h1>我是父組件！</h1>
<child message="我是子組件一！"></child>
<!-- 這是一個 JavaScript 表達(dá)式而不是一個字符串。-->
<child v-bind:message="a+b"></child>
<!-- 用一個變量進行動態(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>
出來的效果是這樣的：
示例效果二
2.通過$ref 實現(xiàn)通信
對于ref官方的解釋是：ref 是被用來給元素或子組件注冊引用信息的。引用信息將會注冊在父組件的 $refs 對象上。
看不懂對吧？很正常，我也看不懂。那應(yīng)該怎么理解？看看我的解釋：
- 如果ref用在子組件上，指向的是組件實例，可以理解為對子組件的索引，通過$ref可能獲取到在子組件里定義的屬性和方法。
- 如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通過$ref可能獲取到該DOM 的屬性集合，輕松訪問到DOM元素，作用與JQ選擇器類似。
那如何通過$ref 實現(xiàn)通信？下面我將上面prop實現(xiàn)的功能，用$ref實現(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)，通過ref=‘msg'可以將子組件child的實例指給$ref，并且通過.msg.getMessage（）調(diào)用到子組件的getMessage方法，將參數(shù)傳遞給子組件。下面是“ console.log( this.$refs.msg);”打印出來的內(nèi)容，這可以讓大家更加了解，究竟通過ref我們獲取了什么：
console.log
最后的效果是這樣的：
示例效果三
這里再補充一點就是，prop和$ref之間的區(qū)別：
- prop 著重于數(shù)據(jù)的傳遞，它并不能調(diào)用子組件里的屬性和方法。像創(chuàng)建文章組件時，自定義標(biāo)題和內(nèi)容這樣的使用場景，最適合使用prop。
- $ref 著重于索引，主要用來調(diào)用子組件里的屬性和方法，其實并不擅長數(shù)據(jù)傳遞。而且ref用在dom元素的時候，能使到選擇器的作用，這個功能比作為索引更常有用到。
3.通過$emit 實現(xiàn)通信
上面兩種示例主要都是父組件向子組件通信，而通過$emit 實現(xiàn)子組件向父組件通信。
對于$emit官網(wǎng)上也是解釋得很朦朧，我按我自己的理解是這樣的:
vm.$emit( event, arg )
$emit 綁定一個自定義事件event，當(dāng)這個這個語句被執(zhí)行到的時候，就會將參數(shù)arg傳遞給父組件，父組件通過@event監(jiān)聽并接收參數(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>
示例效果三
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用vue3.0時，因為底層是使用proxy進行代理的所以當(dāng)我們打印一些值得時候是proxy代理之后的是Proxy<BR>對象，Proxy對象里邊的[[Target]]才是真實的對象，那么如何獲取這個值呢，下面下面給大家介紹兩種方式，感興趣的朋友一起看看吧2023-01-01
這篇文章主要介紹了Vue 打包體積優(yōu)化方案小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
組件間通信簡單來說就是組件間進行數(shù)據(jù)傳遞。就像我們?nèi)粘５拇螂娫?，就是通訊的一種方式，你把話說給我聽，我把話說給你聽，說的話就是數(shù)據(jù)。電話就是通訊方式的一種。無論是 Vue 還是 React ，都得進行組件間通信。2021-05-05
今天小編就為大家分享一篇vue視頻播放暫停代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue-router的安裝不是理想化的,會出現(xiàn)問題,需要靜下心認(rèn)真研究,熬過去就會懂得更多,這篇文章主要給大家介紹了關(guān)于vue2安裝vue-router報錯的解決方法,需要的朋友可以參考下2022-03-03
ElementUI如何修改el-cascader的默認(rèn)樣式
ElementUI 是一套ui組件庫，目前最新版本 react 和 vue 等主流框架都有支持。該庫默認(rèn)主題色是天藍(lán)色，若用于項目開發(fā)，難免遇到要需求修改其默認(rèn)樣式的情況，這篇文章主要介紹了ElementUI如何修改el-cascader的默認(rèn)樣式,需要的朋友可以參考下2023-12-12
本文主要介紹了Element el-upload上傳組件使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue3點擊出現(xiàn)彈窗后背景變暗且不可操作的實現(xiàn)代碼
這篇文章主要介紹了vue3點擊出現(xiàn)彈窗后背景變暗且不可操作的實現(xiàn)代碼,本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
今天小編就為大家分享一篇vue給對象動態(tài)添加屬性和值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3和Koa2實現(xiàn)圖片上傳功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02