如何理解Vue的.sync修飾符的使用
更新時間：2017年08月17日 09:45:58 作者：洪定倫
本篇文章主要介紹了如何理解Vue的.sync修飾符的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了Vue的.sync修飾符的使用，分享給大家，也給自己留個筆記
案例
<div id="app">
<div>{{bar}}</div>
<my-comp :foo.sync="bar"></my-comp>
<!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-comp> -->
</div>
<script>
Vue.component('my-comp', {
template: '<div @click="increment">點(diǎn)我+1</div>',
data: function() {
return {copyFoo: this.foo}
},
props: ['foo'],
methods: {
increment: function() {
this.$emit('update:foo', ++this.copyFoo);
}
}
});
new Vue({
el: '#app',
data: {bar: 0}
});
</script>
說明：代碼<my-comp :foo.sync="bar"></my-comp>會被擴(kuò)展成<comp :foo="bar" @update:foo="val => bar = val"></comp>，就是一個語法糖。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了el-table如何添加loading效果問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
計算圖片的MD5可以將其作為圖片的唯一標(biāo)識,從而優(yōu)化對圖片的存儲和檢索效率,本文主要介紹了Vue獲取圖片MD5的常用方法,感興趣的可以了解下2024-12-12
這篇文章主要介紹了解決element-ui el-checkbox的一些坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
在vue中給列表中的奇數(shù)行添加class的實(shí)現(xiàn)方法
今天小編就為大家分享一篇在vue中給列表中的奇數(shù)行添加class的實(shí)現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇vue移動端彈框組件的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3父子同信的雙向數(shù)據(jù)的項(xiàng)目實(shí)現(xiàn)
我們知道的是，父傳子的通信，和子傳父的通信，那如何實(shí)現(xiàn)父子相互通信的呢，本文就來詳細(xì)的介紹一下，感興趣的可以了解一下2023-08-08
element自定義 多文件上傳 觸發(fā)多次on-change問題
這篇文章主要介紹了element自定義 多文件上傳 觸發(fā)多次on-change問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue 導(dǎo)航錨點(diǎn)_點(diǎn)擊平滑滾動,導(dǎo)航欄對應(yīng)變化詳解
這篇文章主要介紹了vue 導(dǎo)航錨點(diǎn)_點(diǎn)擊平滑滾動,導(dǎo)航欄對應(yīng)變化詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
今天小編就為大家分享一篇基于form-data請求格式詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue項(xiàng)目設(shè)置可以局域網(wǎng)訪問
這篇文章主要介紹了Vue項(xiàng)目設(shè)置可以局域網(wǎng)訪問，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10