[Vue] 父子组件间数据的双向绑定

本文以 ElementUI 的 DatePicker 组件为例, 详细记录实现父子组件间数据的双向绑定的完整过程
完成这篇文章之后, 找到了一种更简洁的实现方式, 代码大体上跟本文差不多, 主要是通过使用 .sync 修饰符使代码更加简洁, 代码在这篇文章中 [Vue] 使用 .sync 实现父子组件间数据的双向绑定

1. 创建子组件

1.1 设置 template

<template>
  <div>
    <el-date-picker
      v-model="select_date"
      align="right"
      type="date"
      placeholder="选择日期"
      @change="change_date"
    >
    </el-date-picker>
  </div>
</template>

注意事项:

• 使用 v-model 绑定到 DatePicker 组件的 value 属性
• 变量 select_date 不能是父组件传入的变量, 因为子组件不能改变父组件的变量
• 通过 DatePicker 的 change 事件将子组件的值传给父组件

1.2 设置 model

model: {
   
    prop: 'value',
    event: 'change'
  }

说明:

• 这里指定的 prop 和 event 是针对该子组件的, 是父组件引用该组件时需要用到的
• 通过 prop 参数指定要绑定的属性, 不设置该参数时默认指定 value 属性
• 通过 change 参数指定要绑定的事件, 父组件通过该参数绑定子组件的事件

1.3 设置 props

props: ['value']

或者

props: {
   
	value: String
}

或者

props