Vue3父子組件傳參有關(guān)sync修飾符的用法詳解
單向數(shù)據(jù)流講解
單向數(shù)據(jù)流（堆可以修改，棧不可修改）
我們都知道, 父傳子的數(shù)據(jù), 是單向數(shù)據(jù)流,即子組件不能直接修改, 父組件傳遞過來的值
但實際上, 對于修改值, 真正是:基本數(shù)據(jù)類型不可修改，復雜數(shù)據(jù)類型不要修改引用地址（棧），它的值可以隨便修改
Vue2.x使用
定義事件的形式, 通知父組件修改
也就是最基礎(chǔ)的用法: props+$emit
寫法:
.sync 和 update: 的使用
父組件傳值的時候, 直接在變量后加 .sync;
子組件 this.$emit("update:變量", 實參), 即可修改父組件傳遞的值;
寫法:
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BZtIWKTt-1631881175196)(現(xiàn)在整理的面試題.assets/image-20210917190128935.jpg)]](http://img.jbzj.com/file_images/article/202109/202109240839424.jpg)
父傳子, 傳遞多個數(shù)據(jù)的簡寫
如果傳遞給子組件的值是多個數(shù)據(jù), 可以直接把多個數(shù)據(jù)包含在一個對象中, 借助v-bind;
注意:v-bind.sync=“doc”;
傳遞給子組件的不是doc對象;
而是對象中的每一個屬性.
寫法:
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3yidmVZ0-1631881175197)(現(xiàn)在整理的面試題.assets/image-20210917191523433.jpg)]](http://img.jbzj.com/file_images/article/202109/202109240839425.jpg)
采用v-model簡寫(要求嚴格)
父組件: v-model, 子組件: 接收的變量必須為value, $emit提交的事件必須為input
寫法:
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-GT15QqZz-1631881175199)(現(xiàn)在整理的面試題.assets/image-20210917201832481.jpg)]](http://img.jbzj.com/file_images/article/202109/202109240839426.jpg)
Vue3.x使用
采用 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)]](http://img.jbzj.com/file_images/article/202109/202109240839427.jpg)
簡寫
當父組件傳遞給子組件的變量名為: modelValue, 可以采用這種寫法
寫法:
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-4513r0bT-1631881175200)(現(xiàn)在整理的面試題.assets/image-20210917194125901.jpg)]](http://img.jbzj.com/file_images/article/202109/202109240839428.jpg)
以上就是Vue3父子組件傳參有關(guān)sync修飾符的用法詳解的詳細內(nèi)容，更多關(guān)于Vue3父子組件傳參的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue首屏加載過慢出現(xiàn)長時間白屏的實現(xiàn)
本文主要介紹了Vue首屏加載過慢出現(xiàn)長時間白屏的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
下面小編就為大家分享一篇Vue.js 點擊按鈕顯示/隱藏內(nèi)容的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue3中內(nèi)置組件Teleport的基本使用與典型案例
Teleport是一種能夠?qū)⑽覀兊哪０逡苿拥紻OM中Vue app之外的其他位置的技術(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3中內(nèi)置組件Teleport的基本使用與典型案例的相關(guān)資料,需要的朋友可以參考下2023-04-04
詳解vue2.0+vue-video-player實現(xiàn)hls播放全過程
這篇文章主要介紹了詳解vue2.0+vue-video-player實現(xiàn)hls播放全過程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
Vue使用Three.js創(chuàng)建交互式3D場景的全過程
在現(xiàn)代Web開發(fā)中,通過在頁面中嵌入3D場景,可以為用戶提供更加豐富和交互性的體驗,Three.js是一款強大的3D JavaScript庫,它簡化了在瀏覽器中創(chuàng)建復雜3D場景的過程,本文將介紹如何在Vue中使用Three.js,創(chuàng)建一個簡單的交互式3D場景,需要的朋友可以參考下2023-11-11
ue3.2新增了一個指令v-memo,引入這個指令的目的是幫助大家更好的為我們的應(yīng)用做性能優(yōu)化,下面這篇文章主要給大家介紹了關(guān)于vue3.2新增指令v-memo基本使用的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue分析同步和異步有什么區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-05-05
這篇文章主要介紹了Vue3偵聽器的實現(xiàn)原理詳情，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了淺談vue2的$refs在vue3組合式API中的替代方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
這篇文章主要介紹了基于vue-video-player自定義播放器的方法，主要是基于video.js開發(fā)的vue-video-player的使用，以及如何操作video.js中的api。需要的朋友可以參考下2018-03-03