vue中.sync修飾符有什么用

.sync 修飾符 其實就是一個語法糖

• vue中 ：子組件不能修改props 外部數據
• vue中： $emit 可以觸發事件并傳參
• vue中： $event可以獲取 $emit 的參數

好，明白這些之后 場景實現
父組件 parent 有自己的data狀態 money 100
父組件中有子組件 child 想把data中的狀態給子組件
代碼實現

<child :money="money"></child>// 子組件中有一個button 按鈕 每次點擊之后 父組件中的data 狀態中 money 就要－10 塊錢 怎么實現？？？？？？ <child :money="money" @handleClick="handleClick"></child> // 子組件中button 按鈕 <button @click="handleClick1"></button> methods:{handleClick1(){this.$emit("handleClick",money - 10)} } // 之后 父組件 再去定義 handleClick方法去接受 // 這種最基本的父子傳值方法是不是挺復雜的

下面就是上面代碼的優化結果

<child :money="money" ></child> // 子組件中button 按鈕點擊事件 <button @click="$emit('updata:money', money - 10)"></button> // 父組件中 <child :money="money" v-on:updata:money="money = $event"></child>

可以看到上面的方法都是通過監聽事件 去通知父組件去修改 子組件不能直接修改
接下來就是 .sync修飾符的作用

<child :money.sync="money"></child> // 相當于 <child :money="money" v-on:updata:money="money = $event "></child>// 當然子組件還是要有事件去觸發 <button @click="handleClick"></button> methods:{handleClick(){this.$emit("updata:money",money-10)} }

大概就是這么多，歡迎補充

總結

以上是生活随笔為你收集整理的vue中 .sync 修饰符 个人理解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。