<template> 接收子组件传递的值
<el-col :span="10">
<childTime @child-event="time"></childTime>
</el-col>
export default {
components: { childTime: ChildTime },
data () { return {
// 子组件传递的时间
dataTime: []
methods: {
time (data) {
this.dataTime = data
console.log(this.dataTime[0])
console.log(this.dataTime[1])
},
局部子组件部分
通过change事件触发方法中的$emit传值到父组件;
this.$emit('child-event', this.value)
<template>
<el-date-picker
v-model="value"
type="datetimerange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
align="right" @change="toParent">
</el-date-picker>
</template>
<script>
export default {
name: 'ChildTime',
methods: {
toParent () {
this.$emit('child-event', this.value)
}
},
data () {
return {
value: '',
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}
}
}
}
</script>
<style scoped>
</style>