欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2021年09月24日 09:02:50   作者：SpringSir  
這篇文章主要給大家介紹關(guān)于前端Vue3父子組件傳參有關(guān)sync修飾符的用法詳細(xì)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助

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

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

我們都知道, 父?jìng)髯拥臄?shù)據(jù), 是單向數(shù)據(jù)流,即子組件不能直接修改, 父組件傳遞過(guò)來(lái)的值

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

Vue2.x使用

定義事件的形式, 通知父組件修改

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

寫法:

在這里插入圖片描述

.sync 和 update: 的使用

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

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

寫法:

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

父?jìng)髯? 傳遞多個(gè)數(shù)據(jù)的簡(jiǎn)寫

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

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

傳遞給子組件的不是doc對(duì)象;

而是對(duì)象中的每一個(gè)屬性.

寫法:

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

采用v-model簡(jiǎn)寫(要求嚴(yán)格)

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

寫法:

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

Vue3.x使用

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

普通用法

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

寫法:

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

簡(jiǎn)寫

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

寫法:

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

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

相關(guān)文章

最新評(píng)論