Vue中.sync修饰符的理解

为什么需要使用.sync

首先可以参考官方文档对于.sync 的解释，简单来说，就是因为子组件无法直接修改父组件传入的 prop，如果直接修改，Vue 会弹出一个警告，而且实际运行的效果也不是我们期望的，这时候就需要有一个办法来让我们能够实现子组件修改父组件传入的参数，这里可以使用之前跨对象通行的办法，用 Vue 自带的 EventBus 来解决这个问题。

举例说明

<div id="app">
    <div>{{bar}}</div>
    <my-comp :foo.sync="bar"></my-comp>
    <!-- <my-comp :foo="bar" v-on:update:foo="bar=@event"></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>

以上就是一个使用.sync实现子组建修改父组件传入参数的例子，在这个例子里需要注意几点：

• 子组建采用this.$emit（）发布自定义事件，第一个参数为自定义事件名，格式必须为： update：propname，第二个参数为传入参数。
• <my-comp :foo="bar" v-on:update:foo="bar=@event"></my-comp>中的@event即为子组件自定义事件第二个传入的参数，这里的@event 不用加this
• <my-comp :foo.sync="bar"></my-comp>其实就是 <my-comp :foo="bar" v-on:update:foo="bar=@event"></my-comp>的简写，也就是所谓的语法糖，表达的含义是完全相同的

以上就是对.sync的功能用法的简单讲解,在 Vue3 中我们可以是使用 v-model 来实现类似功能。

vue2 中 v-model 实现.sync

v-model是 Vue2 中唯一支持双向绑定的指令，用于表单控件绑定，但不代表它只能用在表单控件之上。在文档 使用自定义事件的表单输入组件 一节中提到了，v-model其实是个语法糖。

<input v-model="something">

这不过是以下示例的语法糖：

<input v-bind:value="something"  v-on:input="something = $event.target.value">
//简写：<input :value="something"  @input="something = $event.target.value">

也就是说，你只需要在组件中声明一个 name 为 value 的 props，并且通过触发 input 事件传入一个值，就能修改这个 value。改写示例如下：

vue3 中 v-model 实现.sync

先见此篇：v-model | Vue.js (vuejs.org)