1 主组件
1.1 :passObj 这种 非v-model ; @change="DateChange"触发事件
javascript
复制代码
<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
javascript
复制代码
passObj: {
value2: [formatDate(minTs), formatDate(maxTs)],
},
1.3 传值 激发事件
javascript
复制代码
DateChange(value) { // 用来父传递值给子
console.log('DateChange', value)
this.passObj = { value2: value }
},
2 子组件
2.1 props 接收值
javascript
复制代码
props: {
passObj: {
type: Object,
required: true
},
},
2.2 监控值变化并打印值
javascript
复制代码
watch: {
'passObj'(newValue) {
console.log('日期选择器的值变为：', newValue);
},
},
3 注意事项
3.1 改变obj 监控obj
javascript
复制代码
DateChange(value) { // 用来父传递值给子
console.log('DateChange', value)
this.passObj = { value2: value }
},
javascript
复制代码
watch: {
'passObj'(newValue) {
console.log('日期选择器的值变为：', newValue);
},
},
3.2 改变obj属性 监控obj属性
javascript
复制代码
DateChange(value) { // 用来父传递值给子
console.log('DateChange', value)
this.passObj.value2 = value
},
javascript
复制代码
watch: {
'passObj.value2'(newValue) {
console.log('日期选择器的值变为：', newValue);
},
},