Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “sidebarDialogVisible”

• 警告原因，我不应该直接在里面修改props属性的值。可能会被父类覆盖。

• 解决方案。

• 新建data sidebarDialogVisible,原来的prop属性我改了名字sidebarDialogVisibleProp，这样我html代码就不动了。

 ... 省略 ...
   props: {
    sidebarDialogVisibleProp: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      sidebarDialogVisible: this.sidebarDialogVisibleProp,
    };
  },
  ... 省略 ...

• 监听变化

  watch:{
    sidebarDialogVisibleProp(newVal) {
      this.sidebarDialogVisible = newVal
    },
  },

• 父类使用

 <Sidebar :sidebarDialogVisibleProp="sidebarSwitch"></Sidebar>