目錄

1.父組件向子組件傳值

1.1 步驟

1.2 格式

2. 子組件向父組件傳值

1.1 步驟

1.2 格式

3. 跨組件傳值

運行

4. 跨組件傳函數

?5. 總結

1. 父傳子

2. 子傳父

3. 跨組件傳值(函數)

---

1.父組件向子組件傳值

1.1 步驟

1. ?在父組件中引入子組件
2. ?在子組件標簽中自定義屬性
3. ?在子組件里使用definePorps(["屬性名"])獲取

1.2 格式

父組件:

<Down propMsg = '值' />??

<子組件名 自定義屬性名 = '值'
子組件:

const emits = defineProps( [ ' 自定義屬性名?' ] )

2. 子組件向父組件傳值

1.1 步驟

1. 在子組件中自定義事件
2. 在子組件中使用defineEmits定義對象
3. 使用對象(事件名.{參數})

1.2 格式

子傳父

父組件

<Down @emitsMsg = '函數名'

<子組件名 @自定義事件 = '函數名'

子組件

const emits = defineEmits( [ " emitMsg " ] )

const emits = defineEmits( [ ' 自定義事件名 ' ] )

3. 跨組件傳值

也就是 A是B的父組件 , B是C的父組件 , 而A組件需要給C組件傳遞參數(值,對象,響應式數據等)

首先準備三個vue文件

在App(爺組件)中, 定義一個數據, 并用provide函數, 引入Son.vue(子組件)

在Son.vue中引入sonson.vue組件(孫組件)

?在sonson.vue組件中, 用inject()函數去獲取值

運行

4. 跨組件傳函數

與跨組件傳值類似, 只不過是將一個值 換成了 函數

首先定義一個函數, 然后通過provide()進行傳函數

5. 總結

1. 父傳子

在父組件中自定義屬性名,?然后在子組件中, 使用defineProps( [ ' 屬性名 ' ] ) 獲取值

2. 子傳父

在父組件中自定義事件名, 然后子組件用defineEmits( [ ' 事件名 ' ] )來創建對象, 再通過對象調用函數對父組件進行傳值?

3. 跨組件傳值(函數)

首先在爺組件中定義數據, 然后使用 provide( ' 數據名 ' , 數據 ) 傳遞數據.? 在孫子組件中, 使用inject( ' 數據名 ' ) 函數來接收數據