Vue3父子組件傳參有關sync修飾符的用法詳解
更新時間：2021年09月24日 09:02:50 作者：SpringSir
這篇文章主要給大家介紹關于前端Vue3父子組件傳參有關sync修飾符的用法詳細解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助
單向數據流講解
單向數據流（堆可以修改，棧不可修改）
我們都知道, 父傳子的數據, 是單向數據流,即子組件不能直接修改, 父組件傳遞過來的值
但實際上, 對于修改值, 真正是:基本數據類型不可修改，復雜數據類型不要修改引用地址（棧），它的值可以隨便修改
Vue2.x使用
定義事件的形式, 通知父組件修改
也就是最基礎的用法: props+$emit
寫法:
.sync 和 update: 的使用
父組件傳值的時候, 直接在變量后加 .sync;
子組件 this.$emit("update:變量", 實參), 即可修改父組件傳遞的值;
寫法:
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BZtIWKTt-1631881175196)(現在整理的面試題.assets/image-20210917190128935.jpg)]](http://img.jbzj.com/file_images/article/202109/202109240839424.jpg)
父傳子, 傳遞多個數據的簡寫
如果傳遞給子組件的值是多個數據, 可以直接把多個數據包含在一個對象中, 借助v-bind;
注意:v-bind.sync=“doc”;
傳遞給子組件的不是doc對象;
而是對象中的每一個屬性.
寫法:
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3yidmVZ0-1631881175197)(現在整理的面試題.assets/image-20210917191523433.jpg)]](http://img.jbzj.com/file_images/article/202109/202109240839425.jpg)
采用v-model簡寫(要求嚴格)
父組件: v-model, 子組件: 接收的變量必須為value, $emit提交的事件必須為input
寫法:
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-GT15QqZz-1631881175199)(現在整理的面試題.assets/image-20210917201832481.jpg)]](http://img.jbzj.com/file_images/article/202109/202109240839426.jpg)
Vue3.x使用
采用 v-model, 相對于2.x, 現在一個組件上可以使用多個v-model, 就是Vue2.x修飾符的用法
普通用法
父組件傳遞的時候使用v-model, 子組件修改的時候用: emit("uodate: num", 實參)
寫法:
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-vQ1lQFal-1631881175199)(現在整理的面試題.assets/image-20210917193019726.jpg)]](http://img.jbzj.com/file_images/article/202109/202109240839427.jpg)
簡寫
當父組件傳遞給子組件的變量名為: modelValue, 可以采用這種寫法
寫法:
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-4513r0bT-1631881175200)(現在整理的面試題.assets/image-20210917194125901.jpg)]](http://img.jbzj.com/file_images/article/202109/202109240839428.jpg)
以上就是Vue3父子組件傳參有關sync修飾符的用法詳解的詳細內容，更多關于Vue3父子組件傳參的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了vite打包優(yōu)化分片打包依賴包,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue filter 過濾當前時間 實現實時更新效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue數組動態(tài)刷新失敗問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了解決ant-design-vue安裝報錯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
webpack是一個模塊打包的工具，它的作用是把互相依賴的模塊處理成靜態(tài)資源。這篇文章主要介紹了vue-cli工程webpack的作用和特點,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了element-ui中el-table不顯示數據的問題解決,這是最近在做列表首頁時遇到的一個問題,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了UNIapp實現局域網內在線升級的操作方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了vue通過style或者class改變樣式的實例代碼，在文中給大家提到了vue的一些樣式(class/style)綁定,需要的朋友可以參考下2018-10-10
今天小編就為大家分享一篇vue單頁面應用打開新窗口顯示跳轉頁面的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
從 vue2 升級到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的選項式API。這篇文章主要介紹了vue3 setup() 高級用法,需要的朋友可以參考下2021-11-11