如何理解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">點我+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>會被擴展成<comp :foo="bar" @update:foo="val => bar = val"></comp>，就是一個語法糖。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue3.0實現(xiàn)插件封裝的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要給大家介紹了關于Vue簡易版無限加載組件實現(xiàn)原理與示例代碼的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2022-07-07
如何利用VUE監(jiān)聽網(wǎng)頁關閉并執(zhí)行退出操作
這篇文章主要給大家介紹了關于如何利用VUE監(jiān)聽網(wǎng)頁關閉并執(zhí)行退出操作的相關資料,因為項目中需求,瀏覽器關閉時進行一些操作處理,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vite打包優(yōu)化分片打包依賴包,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了axios簡單實現(xiàn)小程序延時loading指示，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue2.0 根據(jù)狀態(tài)值進行樣式的改變展示方法
下面小編就為大家分享一篇vue2.0 根據(jù)狀態(tài)值進行樣式的改變展示方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue+iview如何實現(xiàn)拼音、首字母、漢字模糊搜索
這篇文章主要介紹了vue+iview如何實現(xiàn)拼音、首字母、漢字模糊搜索，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在vue中實現(xiàn)某一些路由頁面隱藏導航欄的功能操作
這篇文章主要介紹了在vue中實現(xiàn)某一些路由頁面隱藏導航欄的功能操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue-CLI 3 scp2自動部署項目至服務器的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要為大家詳細介紹了Vue中用JSON實現(xiàn)刷新界面不影響倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10