[Vue] 使用 .sync 实现父子组件间数据的双向绑定

刚写完这篇博客 [Vue] 父子组件间数据的双向绑定, 还没来得及在项目中使用就发现了一个更简单的实现方式, 本文继续以 ElementUI 的 DatePicker 组件为例, 就当是对上篇博客的补充吧

主要改进的地方有两个:

• 子组件传递数据时使用 update:myPropName 的模式触发事件
• 父组件接收数据时使用 sync 修饰符

这样做的好处是无需通过在事件上绑定方法来为父组件变量重新赋值, 使代码更简洁

1. 子组件

<template>
  <div>
    <el-date-picker
      v-model="select_date"
      align="right"
      type="date"
      placeholder="选择日期"
      @change="$emit('update:date', select_date)"
    >
    </el-date-picker>
  </div