vue修飾符v-model及.sync原理及區(qū)別詳解
v-model的原理
- v-model的本質(zhì),其實(shí)就是
:value和@input事件的語法糖
<!--v-model寫法-->
<my-component type="text" v-model="num">
<!--展開語法糖后的寫法-->
<my-component type="text"
:value="num"
@input="(value) => num = value"
>
父組件通過向子組件傳值和自定義事件,子組件里面通過$emit去觸發(fā)input事件
- 注意點(diǎn): 在子組件中 這個(gè)input事件是自定義事件
// 在子組件中
<template lang="">
<div>
<div>{{ num }}</div>
<button @click="$emit('input',num + 1)"></button>
</div>
</template>
<script>
export default {
props:{
num:{
type: Number,
required: true
}
}
}
.sync的原理
// 在父組件中
<my-component :value.sync="num" />
// 子組件中
<template lang="">
<div>
<div>{{ num }}</div>
<button @click="$emit('update:value',num + 1)"></button>
</div>
</template>
<script>
export default {
props:{
num:{
type: Number,
required: true
}
}
}
兩者本質(zhì)都是一樣，并沒有任何區(qū)別： “監(jiān)聽一個(gè)觸發(fā)事件”="(val) => value = val"。
v-model和.sync修飾符的區(qū)別
.sync與v-model區(qū)別是
相同點(diǎn)：都是語法糖，都可以實(shí)現(xiàn)父子組件中的數(shù)據(jù)的雙向通信。
區(qū)別點(diǎn)：
- 格式不同。 v-model="num", :num.sync="num"
- v-model： @input + value
- :num.sync: @update:num
- v-model只能用一次；.sync可以有多個(gè)。
只不過v-model默認(rèn)對(duì)應(yīng)的是input或者textarea等組件的input事件，如果在子組件替換這個(gè)input事件，其本質(zhì)和.sync修飾符一模一樣。比較單一，不能有多個(gè)。
// 子組件可以用自定義事件，來替換v-model默認(rèn)對(duì)應(yīng)的原生input事件，只不過我們需要在子組件手動(dòng) $emit
model: {
prop: "value",
event: "update"
},
一個(gè)組件可以多個(gè)屬性用.sync修飾符，可以同時(shí)"雙向綁定多個(gè)“prop”，而并不像v-model那樣，一個(gè)組件只能有一個(gè)。
因?yàn)槭褂胿-model,子組件中只能觸發(fā)一個(gè)input事件,事件名是唯一的,而.sync修飾符,它觸發(fā)的時(shí)間名是updata:屬性名,所以它有多個(gè)事件名,就可以使用多次
總結(jié)作用場(chǎng)景：
- props/$emit是父子組件最常用的通信方式，而v-model、.sync只是其語法糖
- 子組件只是單一的修改某個(gè)父組件值的話，表單類組件使用
v-model語法糖 - 子組件只是單一的修改某個(gè)父組件值的話，非表單類組件使用
sync語法糖 - 復(fù)雜邏輯還是老老實(shí)實(shí)
props/$emit
其實(shí)語法糖只是在父組件用的時(shí)候更加方便，而子組件該咋樣還是咋樣。
以上就是vue修飾符v-model及.sync原理及區(qū)別詳解的詳細(xì)內(nèi)容，更多關(guān)于vue修飾符v-model .sync的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue?Proxy數(shù)據(jù)代理進(jìn)行校驗(yàn)部分源碼實(shí)例解析
Proxy提供了強(qiáng)大的Javascript元編程,有許多功能,包括運(yùn)算符重載,對(duì)象模擬,簡(jiǎn)潔而靈活的API創(chuàng)建,對(duì)象變化事件,甚至Vue 3背后的內(nèi)部響應(yīng)系統(tǒng)提供動(dòng)力,這篇文章主要給大家介紹了關(guān)于vue?Proxy數(shù)據(jù)代理進(jìn)行校驗(yàn)部分源碼解析的相關(guān)資料,需要的朋友可以參考下2022-01-01
vue項(xiàng)目打包自動(dòng)更新版本號(hào)且自動(dòng)刷新緩存的方法示例
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包自動(dòng)更新版本號(hào)且自動(dòng)刷新緩存的相關(guān)資料,文中通過代碼及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-11-11
vue-admin-template?動(dòng)態(tài)路由的實(shí)現(xiàn)示例
本文主要介紹了ue-admin-template動(dòng)態(tài)路由的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue項(xiàng)目打包后,由于html被緩存導(dǎo)致出現(xiàn)白屏的處理方案
這篇文章主要介紹了vue項(xiàng)目打包后,由于html被緩存導(dǎo)致出現(xiàn)白屏的處理方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
使用WebStorm開發(fā)Vue3項(xiàng)目及其他問題詳解
這篇文章主要介紹了在WebStorm中配置Vu3項(xiàng)目的詳細(xì)步驟,還解決了ElementPlus與Sass版本兼容性問題,并提供了詳細(xì)的配置和運(yùn)行步驟,需要的朋友可以參考下2025-02-02
Vue + Webpack + Vue-loader學(xué)習(xí)教程之相關(guān)配置篇
這篇文章主要介紹了關(guān)于Vue + Webpack + Vue-loader的相關(guān)配置篇，文中通過示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解
這篇文章主要為大家介紹了SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
自定義input組件如何實(shí)現(xiàn)拖拽文件上傳
這篇文章主要介紹了自定義input組件如何實(shí)現(xiàn)拖拽文件上傳問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue實(shí)現(xiàn)pdf文檔在線預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)pdf文檔在線預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
vue2.0頁面前進(jìn)刷新回退不刷新的實(shí)現(xiàn)方法
這篇文章主要介紹了vue2.0頁面前進(jìn)刷新回退不刷新的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07