vue中的.sync修飾符用法及原理分析
.sync修飾符用法及原理
vue中我們經(jīng)常會(huì)用v-bind(縮寫(xiě)為:)給子組件傳入?yún)?shù)。
或者我們會(huì)給子組件傳入一個(gè)函數(shù)，子組件通過(guò)調(diào)用傳入的函數(shù)來(lái)改變父組件的狀態(tài)。
例如
//父組件給子組件傳入一個(gè)函數(shù)
?<MyFooter :age="age" @setAge="(res)=> age = res">
?</MyFooter>
?//子組件通過(guò)調(diào)用這個(gè)函數(shù)來(lái)實(shí)現(xiàn)修改父組件的狀態(tài)。
?mounted () {
? ? ? console.log(this.$emit('setAge',1234567));
?}這時(shí)子組件觸發(fā)了父組件的修改函數(shù)使父組件的age修改成了1234567
這種情況比較常見(jiàn)切寫(xiě)法比較復(fù)雜。于是我們引出今天的主角 .sync
這時(shí)我們可以直接這樣寫(xiě)
//父組件將age傳給子組件并使用.sync修飾符。
<MyFooter :age.sync="age">
</MyFooter>
//子組件觸發(fā)事件
?mounted () {
? ? console.log(this.$emit('update:age',1234567));
?}這里注意我們的事件名稱(chēng)被換成了update:age
update：是被固定的也就是vue為我們約定好的名稱(chēng)部分
age是我們要修改的狀態(tài)的名稱(chēng)，是我們手動(dòng)配置的，與傳入的狀態(tài)名字對(duì)應(yīng)起來(lái)
這樣就完成了，是不是感覺(jué)簡(jiǎn)單了很多。
注意事項(xiàng)：
這里我們必須在事件執(zhí)行名稱(chēng)前加上update：的前綴才能正確觸發(fā)事件。
.sync修飾符的用法總結(jié)
需求描述
最近項(xiàng)目中需要在父子組件中實(shí)現(xiàn)數(shù)據(jù)雙向傳遞的功能。
解決方案
在vue中我們知道props傳遞的屬性只能實(shí)現(xiàn)數(shù)據(jù)的單向流動(dòng)，如果我們要實(shí)現(xiàn)逆向傳遞的功能一般通過(guò)this.$emit()來(lái)觸發(fā)方法來(lái)實(shí)現(xiàn)，使用.sync修飾符只需要通過(guò)this.$emit()來(lái)觸發(fā)屬性就能實(shí)現(xiàn)。
// 父組件使用 .sync 傳遞
:page.sync="searchForm.page"
// 子組件使用 'update:' 觸發(fā)
this.$emit('update:page', data)注意：在uniapp項(xiàng)目中的某些情況下不能正常使用。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE使用router.push實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和傳參方式
這篇文章主要介紹了VUE使用router.push實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
下面小編就為大家分享一篇vue.js 獲取select中的value實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vite.config配置alias Error: ENOTEMPTY: director
這篇文章主要為大家介紹了vite.config配置alias時(shí)報(bào)錯(cuò)：Error: ENOTEMPTY: directory not empty, rmdir解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家詳細(xì)介紹了Vue+canvas實(shí)現(xiàn)視頻截圖功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
本文主要介紹了Vue中this.$nextTick()的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Vue 防止短時(shí)間內(nèi)連續(xù)點(diǎn)擊后多次觸發(fā)請(qǐng)求的操作
這篇文章主要介紹了Vue 防止短時(shí)間內(nèi)連續(xù)點(diǎn)擊后多次觸發(fā)請(qǐng)求的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實(shí)現(xiàn)
本文主要介紹了VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了Vue源碼之rollup環(huán)境搭建步驟詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了vue使用?monaco?editor?漢化右鍵菜單實(shí)現(xiàn)漢化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了vue+express+jwt持久化登錄的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06