工作中用到的组件传值

1.实现场景：父组件依据子组件的日期变化实现标题日期变化。

父组件相关代码

<el-tab-pane :label="selDay">
<son @day="changeDay" />
</el-tab-pane>
//data部分
selDay: this.$dayjs().format('YYYY年MM月DD日'),
//函数部分：接收子组件的日期并赋值给selDay
changeDay(date) {
            this.selDay = this.$dayjs(date).format('YYYY年MM月DD日')
        }

子组件相关代码

//监听子组件日期是否发生变化，一旦变化将日期通过day发送给父组件的changeDay
watch: {
        'Date': {
            handler(val) {
                // 通知父级更改日期
                this.$emit('day', val)
            }
        }
        }

2.父组件传值给子组件

父组件相关代码

<son-table :is-edit="showTable" />
//data里定义showTable的值
data(){
return {
showTable: false,
}
}

子组件相关代码

//用props接收父组件传过来的is-edit,再像data里的数据一样直接进行使用
props: {
        isEdit: {
            type: Boolean,
            default: false
        }
    },