vue 主组件把日期选择器给子组件props传obj值, 与子组件监听 watch对象或对象属性

1 主组件

1.1 :passObj 这种 非v-model ;  @change="DateChange"触发事件

<template>
<div class="date-picker-panel"><el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至"start-placeholder='起始日期' end-placeholder='结束日期' @change="DateChange"></el-date-picker></div><div class="component-panel"><component :is="currentComponent" :passObj="passObj" ref="component"></component></div>
</template>

1.2 传递的是obj

passObj: {value2: [formatDate(minTs), formatDate(maxTs)],},

1.3 传值 激发事件

 DateChange(value) {  // 用来父传递值给子console.log('DateChange', value)this.passObj = { value2: value }},

2 子组件

2.1 props 接收值

 props: {passObj: {type: Object,required: true},},

2.2 监控值变化并打印值

 watch: {'passObj'(newValue) {console.log('日期选择器的值变为：', newValue);},},

3 注意事项

3.1 改变obj 监控obj

DateChange(value) {  // 用来父传递值给子console.log('DateChange', value)this.passObj = { value2: value }},

 watch: {'passObj'(newValue) {console.log('日期选择器的值变为：', newValue);},},

3.2 改变obj属性 监控obj属性

 DateChange(value) {  // 用来父传递值给子console.log('DateChange', value)this.passObj.value2 = value},

 watch: {'passObj.value2'(newValue) {console.log('日期选择器的值变为：', newValue);},},