Vue 道具初始化/变异答案

【问题标题】：Vue prop initialization/mutatingVue 道具初始化/变异
【发布时间】：2019-05-03 16:36:51
【问题描述】：

我有以下代码：

export default class LayoutComponent extends Vue {  
    @Prop() whiteBg: boolean;   
    ...
}

但是当我编译它时，我得到：

属性 'whiteBg' 没有初始化器，也没有在构造函数中明确赋值

所以我尝试通过以下方式修复它：

export default class LayoutComponent extends Vue {  
    @Prop() whiteBg: boolean = true;    
    ...
}

但是在 chrome 控制台中我得到错误：

避免直接修改 prop，因为每当父组件重新渲染时，该值都会被覆盖

并在使用它的父组件中设置“忽略”whiteBg 值。

问题：怎么办？

【问题讨论】：

【解决方案1】：

使用以下代码

export default class LayoutComponent extends Vue {  
    @Prop() whiteBg!: boolean;      
    ...
}

【讨论】：

【解决方案2】：

或者使用下面的

export default class LayoutComponent extends Vue {
    @Prop({ default: true }) whiteBg: boolean;
    ...
}

【讨论】：