0. 前言
sync
修饰符能干的,v-model
基本上都能干;- 可以将
sync
认为是句法糖(syntatic sugar)。
注:syntatic sugar的中文对应词是“语法糖”。但笔者认为, syntatic的英文意思其实是句法的形容词,而语法糖本意是编程语句中的便捷写法;再者,语法是个大概念,不只有句法,还有词法、文法等。所以笔者认为翻译成句法糖更合适。
1. 官方文档阅读
<!---完全照抄官方代码--->
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event" >
</text-document>
上面的Vue代码可用sync
改写如下:
<!---全部使用句法糖--->
<text-document
:title.sync="doc.title">
</text-document>
综上,我们可以把.sync
这一句法糖拆解为:
v-bind
一个data
v-on:update
该属性
直接总结为公式,即为(v-bind
与v-on
采用句法糖:
与@
简写):
:prperty.sync === :prperty + @update="property = $event"
2. 深入理解sync的作用
官方文档摘录如下:
在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件两侧都没有明显的变更来源。
那么,何为双向绑定呢?双向即为Model
和View
互相绑定,即“你爱我,我爱你,蜜雪冰城甜蜜蜜”。
再看一个例子。感谢深入理解vue 修饰符sync【 vue sync修饰符示例】 - 简书 (jianshu.com)博客文章的原作者。
<template>
<div class="details">
<myComponent :show.sync='valueChild'
style=
"padding: 30px 20px 30px 5px;
border:1px solid #ddd;
margin-bottom: 10px;"
></myComponent>
<button @click="changeValue">toggle</button>
</div>
</template>
<script>
import Vue from 'vue';
Vue.component('myComponent', {
template: `<div v-if="show">
<p>默认初始值是{{show}},所以是显示的</p>
<button @click.stop="closeDiv">关闭</button>
</div>`,
props:['show'],
methods: {
closeDiv() {
this.$emit('update:show', false); //触发 input 事件,并传入新值
}
}
});
export default{
data(){
return {
valueChild:true,
};
},
methods:{
changeValue(){
this.valueChild = !this.valueChild;
}
}
}
</script>
从实践效果上来看,指的是myComponent
显示开关随着valueChild
值的改变,不过是将v-bind
与v-on:update
合二为一的结果。
3. 后记
v-model
也可实现相同功能,能写v-model
就写v-model
。