Vue2 sync 修饰符的使用

　　在自己封装的组件中我们希望传入子组件的一些属性可以完成双向绑定的效果，我们就可以使用 sync 修饰符来完成这个需求。

父组件：

<template>
  <child :title.sync="childTitle"></child>
</template>

<script>
import child from './child'
export default {
  data() {
    return {
      childTitle: 'fatherData'
    }
  },
  components:{
    child
  }
}
</script>

子组件：

<template>
  <div>
    <div>{{ title }}</div>
    <button @click="changeTitle">点击改变title</button>
  </div>
</template>

<script>
export default {
  props: ['title']
  methods: {
    changeTitle() {
      this.$emit('update:title', 'childChange')
    }
  }
}
</script>

　　这样我们就可以完成类似于双向绑定的修改了，他和双向绑定的不同是：

双向绑定 v-model 他在一个组件中只能存在一个，sync 修饰符在一个组件中可以存在多个。
实现方式的不同：v-model=value 是 @input + value 来完成的，但是 :value.sync 是通过 @update:value 来实现。

// v-model
<child v-model="value"></child>
<child :value="value" @input="val => value = val"></child>
<!-- v-model 是给子组件绑定了 value 属性，子组件内部更改 value 的时候，必须通过 $emit 派发一个 input 事件，并携最新的值 v-model 会自动监听 input 事件，把接收到的最新的值同步赋值到 v-model 绑定的变量上 -->

// .sync
<child :value.sync="value"></child>
<child :value="value" @update:value="val => value = val"></child>
<!-- sync 其实就是一个update的时间监听，将获取到的值赋值给value -->

Vue2 sync 修饰符的使用

评论 (0)