vue中的.sync修飾符用法及原理分析
.sync修飾符用法及原理
vue中我們經(jīng)常會用v-bind(縮寫為:)給子組件傳入?yún)?shù)。
或者我們會給子組件傳入一個函數(shù)，子組件通過調(diào)用傳入的函數(shù)來改變父組件的狀態(tài)。
例如
//父組件給子組件傳入一個函數(shù)
?<MyFooter :age="age" @setAge="(res)=> age = res">
?</MyFooter>
?//子組件通過調(diào)用這個函數(shù)來實現(xiàn)修改父組件的狀態(tài)。
?mounted () {
? ? ? console.log(this.$emit('setAge',1234567));
?}這時子組件觸發(fā)了父組件的修改函數(shù)使父組件的age修改成了1234567
這種情況比較常見切寫法比較復(fù)雜。于是我們引出今天的主角 .sync
這時我們可以直接這樣寫
//父組件將age傳給子組件并使用.sync修飾符。
<MyFooter :age.sync="age">
</MyFooter>
//子組件觸發(fā)事件
?mounted () {
? ? console.log(this.$emit('update:age',1234567));
?}這里注意我們的事件名稱被換成了update:age
update：是被固定的也就是vue為我們約定好的名稱部分
age是我們要修改的狀態(tài)的名稱，是我們手動配置的，與傳入的狀態(tài)名字對應(yīng)起來
這樣就完成了，是不是感覺簡單了很多。
注意事項：
這里我們必須在事件執(zhí)行名稱前加上update：的前綴才能正確觸發(fā)事件。
.sync修飾符的用法總結(jié)
需求描述
最近項目中需要在父子組件中實現(xiàn)數(shù)據(jù)雙向傳遞的功能。
解決方案
在vue中我們知道props傳遞的屬性只能實現(xiàn)數(shù)據(jù)的單向流動，如果我們要實現(xiàn)逆向傳遞的功能一般通過this.$emit()來觸發(fā)方法來實現(xiàn)，使用.sync修飾符只需要通過this.$emit()來觸發(fā)屬性就能實現(xiàn)。
// 父組件使用 .sync 傳遞
:page.sync="searchForm.page"
// 子組件使用 'update:' 觸發(fā)
this.$emit('update:page', data)注意：在uniapp項目中的某些情況下不能正常使用。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue開發(fā)網(wǎng)站的時候,往往圖標(biāo)是起著很重要的作用,下面這篇文章主要給大家介紹了關(guān)于Vue3使用icon的兩種方式,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
這篇文章主要介紹了Vue使用正則校驗文本框為正整數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了Vue使用v-viewer實現(xiàn)圖片預(yù)覽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
vue-virtual-scroll-list虛擬組件實現(xiàn)思路詳解
這篇文章主要給大家介紹了關(guān)于vue-virtual-scroll-list虛擬組件實現(xiàn)思路的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-02-02
vue?跳轉(zhuǎn)頁面$router.resolve和$router.push案例詳解
這篇文章主要介紹了vue?跳轉(zhuǎn)頁面$router.resolve和$router.push案例詳解,這樣實現(xiàn)了既跳轉(zhuǎn)了新頁面,又不會讓后端檢測到頁面鏈接不安全之類的,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)axios圖片上傳功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
vue3中require報錯require is not defined問題及解決
這篇文章主要介紹了vue3中require報錯require is not defined問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue在index.html中引入靜態(tài)文件不生效問題及解決方法
這篇文章主要介紹了vue在index.html中引入靜態(tài)文件不生效問題及解決方法，本文給大家分享兩種原因分析，通過實例代碼講解的非常詳細(xì) ,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了VUE div click無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
今天小編就為大家分享一篇對vue中v-if的常見使用方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09