Vue .sync修饰符

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”，vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器

示例

// 子组件中触发原生事件，从而触发emit方法
this.$emit('update:title', newTitle); // 也是语法

// 父组件扩展为
<textDocument v-bind:title="doc.title" v-on:update:title="doc.title = $event"></textDocument>

// 为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：
<textDocument v-bind:title.sync="doc.title"></textDocument>
// 等同于
<textDocument :title.sync="doc.title"></textDocument>

子组件

<template>
    <div id="app">
        <el-input v-model="inputModel" placeholder="请输入内容" @input="inputEvent"></el-input>
    </div>
</template>
export default{
    name: 'children',
    props:{
        inputModel: ''
    },
    methods:{
        inputEvent(value){
            this.$emit('update:inputModel', value); // 当改变输入框的值时，父组件中 inputModel 也会同步
        }
    }
}

父组件

<children :inputModel.sync="inputModel"></children>

<el-button @click="test">测试按钮</el-button>

export default{
    name: 'parent',
    data(){
        return{
            inputModel: 'hello world', // 默认向子组件传值
        }
    },
    mounted:{
        test(){
            console.log(this.inputModel); // 当子组件改变 inputModel 值时，点击测试按钮，查看 inputModel
        }
    }
}

注意：带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync="inputModel + '!'" 是无效的)

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定