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);},},