Vue 自定义事件.sync 双向绑定

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

前言

之前在Vue Props一文中也尝试过使用，props单项传值通过监听事件以及自定义事件把子类数据反向传递给父类，实现数据的双向绑定。

但是带了问题也很明显，总感觉代价太大了。维护起来麻烦，需要同时维护子组件和父组件的变量同步。当然官方有更好的解决方案

Before

（子类）监听变化事件->自定义事件回掉给父类->父类修改值->再通过props传递给子类。详细案例请看Vue Props ## 双向绑定， 感觉也可以作为一个反例。

After

其实管方已经有update:my-prop-name触发事件了。

这也是为什么我们推荐以 update:my-prop-name 的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：

this.$emit('update:title', newTitle)

使用update官方开放接口，就不需要处理watch监听了。

当然处理子类值的时候不要直接修改props传入原参数，而是赋值修改再传递给父类。不然会报错：

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

DEMO

// Father
<template>
  <div class="father">
    <child-demo :count="count" @update:data="updateData" />
    <router-view />
  </div>
</template>

<script>
import childDemo from '@/components/childDemo'
export default {
  name: 'father',
  data () {
    return {
      count: 0
    }
  },

  methods: {
    updateData (val) {
      this.count = val
    }
  },

  components: {
    childDemo
  }
}
</script>

// Child

<template>
  <div class="child-demo">
    <p>{{ count }}</p>
    <button @click="handleAddCount">child add</button>
  </div>
</template>

<script>
export default {
  name: 'child-demo',
  props: ['count'],
  data () {
    return {}
  },
  methods: {
    handleAddCount () {
      let data = this.count
      data++
      this.$emit('update:data', data)
    }
  }
}
</script>

Now

官方为了方便，为这种模式提供了缩写.sync修饰符

以上面的案例：

// Father
...
// 去除 update:data 事件监听绑定。添加参数.sync修饰符
<child-demo :count.sync="count" />
...

这样就方便多了，而且更好维护数据。

最后

官方文档很重要！遇到的问题基本官方文档里面都有，你想到的人家也都想到了。还要继续努力呀～