vue3父?jìng)髯?單項(xiàng)數(shù)據(jù)流)

父組件通過屬性綁定傳遞數(shù)據(jù) 

子組件內(nèi)部通過props接收數(shù)據(jù) 

基本數(shù)據(jù)類型---改變父組件的數(shù)據(jù)--只改變了 父組件的的數(shù)據(jù)在子組件的顯示

通過動(dòng)態(tài)屬性綁定 傳遞list給子組件

在子組件內(nèi)部修改父組件的復(fù)雜數(shù)據(jù)類型的數(shù)據(jù)---可以修改 

vue3 父子傳參 簡(jiǎn)單易懂

父?jìng)髯?/h3>

1、 在父組件的子組件標(biāo)簽上通過 :傳遞到子組件的數(shù)據(jù)名="需要傳遞的數(shù)據(jù)"

在這里為了大家區(qū)分我將父組件中的數(shù)據(jù)定義為 ： fatherData  ，

子組件需要接收的數(shù)據(jù)定義為： sonData 。

// 父組件
<template>
? <div class="about">
? ? {{fatherData}}
? ? <!-- 父?jìng)髯?-->
? ? <!-- 1、 在父組件的子組件標(biāo)簽上通過 :傳遞到子組件的數(shù)據(jù)名="需要傳遞的數(shù)據(jù)" -->
? ? <children :sonData="fatherData"></children>
? </div>
</template>
?
<script>
import children from "@/components/children"
import { defineComponent,reactive,toRefs } from "vue";
export default defineComponent({
? components:{
? ? children,
? },
name:"about",
setup(){
? const state = reactive({
? ? fatherData:"hello"
? })
? return {
? ? ...toRefs(state)
? }
}
?
})
</script>

2、子組件依舊通過 props 來(lái)接收并且在模版中使用

那么大多數(shù)情況下都會(huì)去通過父組件傳遞到子組件中的數(shù)據(jù)，根據(jù)這個(gè)數(shù)據(jù)去做一些特定的功能或者請(qǐng)求數(shù)據(jù)等等。

在 setup 鉤子中第一個(gè)參數(shù) props 就可以訪問到父組件傳遞的數(shù)據(jù)，那么在函數(shù)中也是通過：  props.父組件傳遞數(shù)據(jù)的名稱   來(lái)操作該數(shù)據(jù)。

setup函數(shù)接收props作為其第一個(gè)參數(shù)，props對(duì)象是響應(yīng)式的(單向的父—>子)，watchEffect或watch會(huì)觀察和響應(yīng)props的更新。不要對(duì)props對(duì)象進(jìn)行解構(gòu)，那樣會(huì)失去響應(yīng)性。在開發(fā)過程中，props對(duì)象對(duì)用戶空間代碼時(shí)不可變的，用戶嘗試修改props時(shí)會(huì)觸發(fā)警告。

// 子組件
<template>
? <div class="children">
? ? <!-- 3、在子組件模版中使用 -->
? ? {{sonData}}
? </div>
</template>
<script>
export default {
name:"Children",
// 2、子組件通過 props 來(lái)接收
? props:["sonData"],
? setup(props){
? ? function childrenbut(){
? ? ? // props.sonData ?可以訪問到父組件傳遞的數(shù)據(jù)
? ? ? console.log(props.sonData);
? ? }
? ? return {
? ? ? childrenbut
? ? }
? }
}
</script>

子傳父

1、子組件觸發(fā)事件通過 setup 的第二個(gè)參數(shù) context.emit 來(lái)實(shí)現(xiàn)子傳父 

context 上下文對(duì)象。

// 子組件
<template>
? <div class="children">
? ? {{sonData}}
? ? <!-- 1、觸發(fā)事件 -->
? ? <button @click="childrenbut">子組件按鈕</button>
? </div>
</template>
<script>
export default {
name:"Children",
? setup(props,context){
? ? function childrenbut(){
? ? ? console.log(context);
? ? ? // 2、通過context.emit 實(shí)現(xiàn)子傳父
? ? ? // 第一個(gè)參數(shù)為 方法名，第二個(gè)參數(shù)為 需要傳遞的數(shù)據(jù)
? ? ? context.emit("change",'world')
? ? }
? ? return {
? ? ? childrenbut,
? ? }
? }
}
</script>

context 也可以使用結(jié)構(gòu)的形式這樣寫

// 子組件
<script>
export default {
name:"Children",
? // 通過結(jié)構(gòu) 之后直接寫 emit {emit}
? setup(props,{emit}){
? ? function childrenbut(){
? ? ? // 省去 context.emit
? ? ? emit("change",'world')
? ? }
? ? return {
? ? ? childrenbut,
? ? }
? }
}
</script>

最后總結(jié)一下：

在 vue3 中無(wú)論是父?jìng)髯舆€是子傳父其實(shí)與 vue2 中都相差無(wú)幾，

思想大多一樣，不一樣的是 vue3 需要通過調(diào)用各種各樣的鉤子來(lái)實(shí)現(xiàn)傳參。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論