[JavaScript知识库]vue.sync的用法

vue提供了.sync修饰符，说白了就是一种简写的方式，我们可以将其当做是一种语法糖，比如v-on:click可以简写为@click。sync修饰符，与我们平常使用$emit实现父子组件通信没有区别,只不过是写法上方便一下。

.sync修饰符

首先我们知道，父组件通过绑定属性的方式向子组件传值，而在子组件中可以通过$emit向父组件通信，通过这种间接的方式改变父组件的data，从而实现子组件改变props的值，比如向下边这样：

this.$emit('update:value', newValue)

父组件监听这个事件并重新修改这个value

<child
  :value="value"
  @update:value="val => value= val"
></child>

为了方便这种写法，我们可以使用.sync修饰符

<child :value.sync='value'></child>

例子

<template>
  <div>
    <child :name.sync="name"></child>
    <button @click="changeName">改变</button>
  </div>
</template>
 
<script>
import child from './child'
export default {
  components: {
    child
  },
  data () {
    return {
      name: '小明'
    }
  },
  methods: {
    changeName() {
      this.name = '小红';
    }
  }
}
</script>

?

<template>
  <div>
    <input :value="name" @input="inputFun" type="text">
  </div>
</template>
<script>
  export default {
    props: {
      name: {
        type: String,
        required: true
      }
    },
    methods: {
      inputFun(e) {
        this.$emit('update:name', e.target.value);
      }
    }
  }
</script>