Vue 的.sync 修饰符

Vue的规定

在Vue的父子组件触发事件通信的过程中，有以下几条规则

1. 组件不能修改props传入的外部数据
2. 组件可以通过this.$emit触发事件并传参
3. $event可以获取$emit的参数

数据双向绑定的复杂方法

子组件

<template lang="">
    <div>
        
        <input @input="onInput" :value="message">
    </div>
</template>

<script>
export default {
    props:{
        message:{
            type:String
        }
    },
    methods:{
        onInput(e){
            this.$emit("valueChange",e.target.value)
        }
    }
}
</script>
<style lang="">
    
</style>
复制代码

父组件

<template lang="">
    <div>
        {{myMessage}}
        <info :value="myMessage" @valueChange="e => myMessage = e"></info>
    </div>
</template>
<script>
import Info from "./info.vue"
export default {
    components:{
        Info
    },
    data(){
        return{
            myMessage:""
        }
    }
}
</script>

<style lang="">
    
</style>
复制代码

子组件通过$emit 触发事件，父组件通过接受对应事件绑定实现接收参数

sync修饰符

上述代码可以通过.sync可以简化上面代码，只需要修两个地方：

1. 组件内触发的事件名称以“update:myPropName”命名。
2. 父组件v-bind:value 加上.sync修饰符，即 v-bind:value.sync 这样父组件就不用再手动绑定@update:value事件了。

// 子组件
...
methods: {
   onInput(e) {
       this.$emit("update:value", e.target.value)
   }
}
复制代码

// 父组件
<info :value.sync="myMessage"></info>
复制代码

多个属性一起绑定

可以通过对象形式实现v-bind.sync = "对象"

<info v-bind.sync="obj"></info> 
<script> 
  ..
  data() { obj: {a: '', b: '', c: '', d: ''} } 
  .. 
</script>
复制代码

注意：

带有.sync修饰符的v-bind不能与表达式一起使用（例如 v-bind:title.sync = "doc.title + '!'"是无效的）