Vue父子组件各v-model的通信

首先明确什么是父组件、子组件

父组件：包含导入的子组件、以标签形式去调用子组件的文件
子组件：写具体样式或逻辑的文件

然后是父子组件的通信

vue的父子组件的通信原则是单向数据流

父=>子是通过props形式向子组件传递参数，子组件props中的属性在子组件中无法修改，否则vue会报错，
子=>父是通过emit形式，基于子组件中的某个事件触发，单向传递到对应的父组件的某个方法中。

现有一个日期间隔的业务需要放入组件中，包含两个日期控件。最基础的，我们需要向这个组件传入两个日期参数startDate和endDate，子组件收到这两个参数分别对两个控件赋值，所以父组件以props形式将startDate和endDate传入子组件中，但是这样带来的问题是修改子组件的日期控件并不会修改父组件startDate和endDate！

一个办法是在子组件内创建两个内部data属性，start和end，并在初始化时将其赋值为startDate和endDate（不会报错），@change时再调用父组件的handleDatechange将start或end传递到父组件上，这样就解决了父子组件的参数传递！

注：startDate和endDate均是字符串类型，对象类型没有试过。

转载于:https://www.cnblogs.com/bestrack/p/11469459.html