Vue3父子組件傳參有關(guān)sync修飾符的用法詳解

更新時間：2021年09月24日 09:02:50 作者：SpringSir

這篇文章主要給大家介紹關(guān)于前端Vue3父子組件傳參有關(guān)sync修飾符的用法詳細(xì)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助

單向數(shù)據(jù)流講解

單向數(shù)據(jù)流（堆可以修改，棧不可修改）

我們都知道, 父傳子的數(shù)據(jù), 是單向數(shù)據(jù)流,即子組件不能直接修改, 父組件傳遞過來的值

但實際上, 對于修改值, 真正是:基本數(shù)據(jù)類型不可修改，復(fù)雜數(shù)據(jù)類型不要修改引用地址（棧），它的值可以隨便修改

也就是最基礎(chǔ)的用法: props+$emit

寫法:

在這里插入圖片描述

父組件傳值的時候, 直接在變量后加 .sync;

子組件 this.$emit("update:變量", 實參), 即可修改父組件傳遞的值;

寫法:

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BZtIWKTt-1631881175196)(現(xiàn)在整理的面試題.assets/image-20210917190128935.jpg)]

如果傳遞給子組件的值是多個數(shù)據(jù), 可以直接把多個數(shù)據(jù)包含在一個對象中, 借助v-bind;

注意:v-bind.sync=“doc”;

傳遞給子組件的不是doc對象;

而是對象中的每一個屬性.

寫法:

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3yidmVZ0-1631881175197)(現(xiàn)在整理的面試題.assets/image-20210917191523433.jpg)]

父組件: v-model, 子組件: 接收的變量必須為value, $emit提交的事件必須為input

寫法:

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-GT15QqZz-1631881175199)(現(xiàn)在整理的面試題.assets/image-20210917201832481.jpg)]

采用 v-model, 相對于2.x, 現(xiàn)在一個組件上可以使用多個v-model, 就是Vue2.x修飾符的用法

父組件傳遞的時候使用v-model, 子組件修改的時候用: emit("uodate: num", 實參)

寫法:

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-vQ1lQFal-1631881175199)(現(xiàn)在整理的面試題.assets/image-20210917193019726.jpg)]

當(dāng)父組件傳遞給子組件的變量名為: modelValue, 可以采用這種寫法

寫法:

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-4513r0bT-1631881175200)(現(xiàn)在整理的面試題.assets/image-20210917194125901.jpg)]

以上就是Vue3父子組件傳參有關(guān)sync修飾符的用法詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3父子組件傳參的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: