如何理解Vue的.sync修飾符的使用
本文介紹了Vue的.sync修飾符的使用,分享給大家,也給自己留個(gè)筆記
案例
<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>會(huì)被擴(kuò)展成<comp :foo="bar" @update:foo="val => bar = val"></comp>,就是一個(gè)語(yǔ)法糖。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
在vue中給列表中的奇數(shù)行添加class的實(shí)現(xiàn)方法
今天小編就為大家分享一篇在vue中給列表中的奇數(shù)行添加class的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3父子同信的雙向數(shù)據(jù)的項(xiàng)目實(shí)現(xiàn)
我們知道的是,父?jìng)髯拥耐ㄐ?,和子傳父的通信,那如何?shí)現(xiàn)父子相互通信的呢,本文就來詳細(xì)的介紹一下,感興趣的可以了解一下2023-08-08
element自定義 多文件上傳 觸發(fā)多次on-change問題
這篇文章主要介紹了element自定義 多文件上傳 觸發(fā)多次on-change問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03
vue 導(dǎo)航錨點(diǎn)_點(diǎn)擊平滑滾動(dòng),導(dǎo)航欄對(duì)應(yīng)變化詳解
這篇文章主要介紹了vue 導(dǎo)航錨點(diǎn)_點(diǎn)擊平滑滾動(dòng),導(dǎo)航欄對(duì)應(yīng)變化詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue項(xiàng)目設(shè)置可以局域網(wǎng)訪問
這篇文章主要介紹了Vue項(xiàng)目設(shè)置可以局域網(wǎng)訪問,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10

