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均是字符串类型,对象类型没有试过。

猜你喜欢

转载自www.cnblogs.com/bestrack/p/11469459.html
今日推荐