解决报错Avoid mutating a prop directly since the value will be overwritten whenever the parent component

目录

报错信息

报错分析

解决方案

---

报错信息

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: "name"

报错分析

是因为在子组件里修改通过props传参从父组件里传来的数据

解决方案

通过在子组件data里面定义一个变量，赋值为props传递来的数据，再通过watch监听器来监听props数据的变化，并再次赋新值(data里面的数据只会在创建的时候赋值一次，不会动态监听)

data() {
  return {
    navName: this.name
  }
},

props: ['name'],

watch: {
  name: {
    handler(newVal,oldVal) {
      this.navName = newVal
    }
  }
},