本次主要針對vue中父子組件傳參所進行講解

一、vue2和vue3父傳子區別

1.vue2的父傳子

1).在父組件子標簽中自定義一個屬性

<sonPage :子組件接收到的類名="傳輸的數據">子組件</sonPage>

2).在子組件中peops屬性中拿到自定屬性

props: {子組件接收的名字: [Number],//設置數據的默認類型default: () => {return {// 填寫默認值}}
}

2.vue3的父傳子

1).在父組件子標簽中自定義一個屬性

與vue2不同的是，這里有兩種方式

一種是與vue2方式相同

<son-page :子組件接收到的類名="傳輸的數據"></son-page>

另一種是直接使用v-bind

<son-page v-bind="父組件傳遞的參數"></son=page>

2).子組件通過defineProps接收

//通過數組方式接收參數，這里的msg和abc是父組件傳過來的參數名
const foo = defineProps(['msg'])//通過對象方式接收參數1
const foo = defineProps({//可設置接收類型msg: [Number,String]
})//通過對象方式接收參數2
const foo = defineProps({msg:{//對象形式不僅可設置接收類型，還可以設置默認值type:[Number,String],//必須傳此參數，否則報錯                               required:true}，//可接收多個數據類型abc: [Number]
})// 通過 foo.參數名 進行渲染

注意：

其中包含了一個required屬性，放值為true時必須傳此參數，否則會報錯

3.區別

1).發送數據

vue3在vue2的基礎上多了一種發送數據的方式

2).接收數據

在vue2中是使用props來進行接收父組件傳輸的數據；

在vue3中則是使用defineProps來進行接收

二、vue2和vue3子傳父區別

1.vue2的子傳父

1).在父組件子標簽中自定義一個事件(方法里面有一個參數用來接收子組件的傳值)

<sonPage @父組件接收數據的方法="子組件發送參數的方法"></sonPage>

2).在子組件中this.$emit('自定義事件的名字',傳遞的數據)

2.vue3的子傳父

1).在父組件子標簽中自定義一個事件(與vue2相同)

2).子組件發送數據

與vue2不同的是，這里也有兩種方式進行發送數據

一種是通過defineEmits發送

//通過defineEmits
const emit = defineEmits(['fromSon'])function fromSon() {emit('fromSon',參數)
}

另一種是直接在點擊事件寫

//直接在子組件標簽傳參
<button @click='$emit("fromSon",{參數})'>fromSon</button>

3.區別

1).父組件接收數據(沒有區別)

2).子組件發送數據

vue2中發送通過this.$emit進行傳輸數據

vue3中可直接通過$emit進行傳輸數據；也可以通過defineEmits來進行數據傳輸

以上便是本次的分享，如有問題，可以評論或私信