?? 寫在前面

專欄介紹：
涼哥作為 Vue 的忠實(shí) 粉絲輸出過大量的 Vue 文章，應(yīng)粉絲要求開始更新 Vue3 的相關(guān)技術(shù)文章，Vue 框架目前的地位大家應(yīng)該都曉得，所謂三大框架使用人數(shù)最多，公司選型最多的框架，涼哥之前在文章中也提到過就是 Vue 框架之所以火起來的原因，和 Vue 框架相比其他框架的巨大優(yōu)勢，有興趣的伙伴可以看一下 Vue框架背后的故事、尤大大對前端生態(tài)是這樣看的，隨著 Vue 框架不斷的被認(rèn)可，現(xiàn)如今的 Vue 框架已經(jīng)是前端工程師必備的技能了，記得尤大大開發(fā) Vue 的初衷，為了讓自己的開發(fā)工作更加便捷，也希望這個(gè)框架能讓更多人的開發(fā)工作變得輕松；現(xiàn)如今 Vue 框架做到了，尤大大做到了，當(dāng)然在 20 年的 9 月 18 日，Vue 又向前端同僚們報(bào)告了一次大的突破 Vue3.0 版本正式發(fā)布！如今已經(jīng)過去了兩年多的時(shí)間，更多的公司選擇了Vue3技術(shù)，所以涼哥也在這個(gè)時(shí)候?yàn)榇蠹页鲞@份專欄，本專欄將幫助大家掌握Vue3+TS技術(shù)，提升自己競爭力！點(diǎn)擊鏈接訂閱本專欄吧——Vue3通透教程【從零到一】

溫故知新：
上篇文章文章中我們?yōu)榇蠹医榻B了我們Vue3中通過ref獲取和操作DOM，以及我們可以通過ref獲取組件，但是需要通過defineExpose函數(shù)在子組件中進(jìn)行暴露我們方可在父組件獲取數(shù)據(jù)和調(diào)用方法，本篇內(nèi)容呢將帶領(lǐng)大家掌握組件通訊，實(shí)現(xiàn)組件中的數(shù)據(jù)獲?。∽屛覀? let’s coding！

?? 父 ?? 子

大家應(yīng)該都比較熟悉Vue2中的父組件向子組件傳值的方式，就是通過在子組件的標(biāo)簽上設(shè)置自定義屬性，然后子組件通過 props 接受屬性的值即可。其實(shí)在我們組合式API中也為大家推出了跟props用法極為相似的API那就是——defineProps函數(shù)，用法如下：

1）同于Vue2的用法我們傳值時(shí)都需要在子標(biāo)簽中設(shè)置自定義屬性
2）子組件中 defineProps 的寫法和props類似
3）我們在defineProps中接收的參數(shù)跟Vue2props一樣都可以直接在模板中進(jìn)行使用，但是如果我們想在JS中使用需要用變量接收defineProps，然后通過變量訪問里面的數(shù)據(jù)！

子組件 son.vue 我們來通過 defineProps 來接受父組件傳遞的參數(shù)并且在模板中進(jìn)行使用；

<template>
    <div>
        我是{{ sonName }}兒子
    </div>
</template>

<script setup>
defineProps({
    sonName: {
        type: String,
        defaule: ''
    }
})
</script>

父組件 app.vue 中引入子組件，并在子組件標(biāo)簽中設(shè)置自定義屬性 sonName 并傳遞參數(shù)“小”給子組件

<template>
    <p>您好，</p>
    <son :sonName="sonName"></son>
</template>
<script setup>
import { ref } from "vue";
import son from "./son.vue";
let sonName = ref('小')
</script> 

還記得我們上面說的第三條么，我們目前是在模板中進(jìn)行使用是沒有任何問題的，但是如果我們在子組件直接接收到參數(shù)后，進(jìn)行打印大家可以嘗試一下，其實(shí)會報(bào)錯(cuò)，不知道大家能不能回想到我們前面講setup語法糖的時(shí)候跟大家提及到的setup中只能獲取頂級變量；所以這里想要在js中直接打印我們需要聲明變量來接收 defineProps。大家自行嘗試一下！但是我們直接在模板中使用是沒有問題的。

?? 子 ?? 父

通過上面的小節(jié)大家掌握了我們Vue3中父傳子組件通訊的方式，其實(shí)子傳父的用法也是類似于Vue2的方式，下面我們就來一下吧！其實(shí)也是通過子組件調(diào)用父組件的自定義方法并傳遞參數(shù)，我們在父組件的自定義方法中來獲取參數(shù)，從而實(shí)現(xiàn)子組件向父組件傳值，注意我們之前Vue2中是通過this.$emit 而我們的Vue3種setup沒有this，這就用到了我們下面的新函數(shù)——defineEmit函數(shù)來獲取emit函數(shù)。

1）在父組件app.vue中我們在子組件標(biāo)簽上注冊自定義事件；
2）子組件中我們通過defineEmits函數(shù)來獲取要觸發(fā)的自定義事件
3）我們聲明變量emit來接收defineEmits函數(shù)，并且通過emit即可調(diào)用函數(shù)并且傳參；

下面我們就在編寫一個(gè)小案例，還是實(shí)現(xiàn)一個(gè)點(diǎn)贊的功能，只不過我們講點(diǎn)擊按鈕放在子組件，點(diǎn)擊后觸發(fā)父組件的自定義事件并且傳遞參數(shù)實(shí)現(xiàn)點(diǎn)贊功能，熟悉我們的子組件向父組件傳參！

//son.vue
<template>
    <div>
        <button @click="zan">贊+10</button>
    </div>
</template>

<script setup>
const emit = defineEmits(['chage'])
const zan = () => {
    emit('chage',10)
}
</script>

//app.vue
<template>
    <p>您好，幾何心涼</p>
    總贊數(shù){{ num }}
    <son @chage="fun"></son>
</template>
<script setup>
import { ref } from 'vue';
import son from './son.vue'

let num=ref(0)

const fun=value=>{
    num.value+=value
}

</script> 

?? 寫在最后

這篇文章為大家介紹了我們Vue3中的父子組件通訊，你是否學(xué)會了呢，小伙伴一定記的嘗試哦，大家都知道我們出了父子組件通訊之外呢，還是有很多兄弟組件，爺孫組件通訊，那下篇文章中我們將為大家介紹跨級組件通訊！各位小伙伴讓我們 let’s coding！

本期推薦

?

??

??

??
文章來源地址http://www.zghlxwxcb.cn/news/detail-789329.html

到了這里，關(guān)于Vue3通透教程【九】父子組件通訊一目了然的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！