浅出理解Vue中的sync修饰符

0. 前言

  1. sync修饰符能干的,v-model基本上都能干;
  2. 可以将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-bindv-on采用句法糖:@简写):

:prperty.sync === :prperty + @update="property = $event"

2. 深入理解sync的作用

官方文档摘录如下:

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件两侧都没有明显的变更来源。

那么,何为双向绑定呢?双向即为ModelView互相绑定,即“你爱我,我爱你,蜜雪冰城甜蜜蜜”。

再看一个例子。感谢深入理解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-bindv-on:update合二为一的结果。

3. 后记

v-model也可实现相同功能,能写v-model就写v-model