父子組件傳參 關于 .sync修飾符等用法
- 單向資料流講解
- Vue2.x使用
- 定義事件的形式, 通知父組件修改
- .sync 和 update: 的使用
- 父傳子, 傳遞多個資料的簡寫
- 采用v-model簡寫(要求嚴格)
- Vue3.x使用
- 普通用法
- 簡寫
單向資料流講解
- 單向資料流（堆可以修改，堆疊不可修改）
- 我們都知道, 父傳子的資料, 是單向資料流,
- 即子組件不能直接修改, 父組件傳遞過來的值
- 但實際上, 對于修改值, 真正是:
基本資料型別不可修改，復雜資料型別不要修改參考地址（堆疊），它的值可以隨便修改
Vue2.x使用
定義事件的形式, 通知父組件修改
-
也就是最基礎的用法:
props+$emit -
寫法一:
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-j0NlMuBZ-1631881175175)(現在整理的面試題.assets/image-20210917185148255.png)]](https://img.uj5u.com/2021/09/19/265949191032331.png)
-
寫法二:
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Uyj8IZHm-1631881175195)(現在整理的面試題.assets/image-20210917185348526.png)]](https://img.uj5u.com/2021/09/19/265949191032332.png)
.sync 和 update: 的使用
-
父組件傳值的時候, 直接在變數后加
.sync; -
子組件
this.$emit("update:變數", 實參), 即可修改父組件傳遞的值; -
寫法:
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BZtIWKTt-1631881175196)(現在整理的面試題.assets/image-20210917190128935.png)]](https://img.uj5u.com/2021/09/19/265949191032333.png)
父傳子, 傳遞多個資料的簡寫
-
如果傳遞給子組件的值是多個資料, 可以直接把多個資料包含在一個物件中, 借助v-bind;
-
注意:v-bind.sync=“doc”;
-
傳遞給子組件的不是doc物件;
-
而是物件中的每一個屬性.
-
-
寫法:
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3yidmVZ0-1631881175197)(現在整理的面試題.assets/image-20210917191523433.png)]](https://img.uj5u.com/2021/09/19/265949191032334.png)
采用v-model簡寫(要求嚴格)
-
父組件:
v-model, 子組件: 接收的變數必須為value, $emit提交的事件必須為input -
寫法:
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-GT15QqZz-1631881175199)(現在整理的面試題.assets/image-20210917201832481.png)]](https://img.uj5u.com/2021/09/19/265949191032335.png)
Vue3.x使用
- 采用
v-model, 相對于2.x, 現在一個組件上可以使用多個v-model, 就是Vue2.x修飾符的用法
普通用法
-
父組件傳遞的時候使用
v-model, 子組件修改的時候用:emit("uodate: num", 實參) -
寫法:
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-vQ1lQFal-1631881175199)(現在整理的面試題.assets/image-20210917193019726.png)]](https://img.uj5u.com/2021/09/19/265949191032336.png)
簡寫
-
當父組件傳遞給子組件的變數名為:
modelValue, 可以采用這種寫法 -
寫法:
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-4513r0bT-1631881175200)(現在整理的面試題.assets/image-20210917194125901.png)]](https://img.uj5u.com/2021/09/19/265949191032337.png)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301296.html
標籤：其他