[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent

原创已于 2022-07-05 12:57:52 修改 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-07-05 12:54:54 首次发布

vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了在Vue项目中如何避免直接修改通过props传递的值，并提供了一个具体的例子来展示正确的做法，即通过子组件触发事件通知父组件来更新状态。

Vue项目控制台报错如下：
[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: “allLocationOpen” found in…

错误原因：
避免直接改变属性，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于属性值的数据或计算属性。通过props传递给子组件的topActive，不能在子组件内部修改props中的topActive值。

代码示例：

<template>
<div>
<button @click="allLocationOpen = false">关 闭</button></div>
</template>
<script>
export default {
  name: 'AllLocation',
  props: {
    allLocationOpen: {
        type: Boolean,
        default: false
      },
  },
}
</script>

修改方案：不直接修改该参数，回调父组件方法去修改，避免子组件中直接修改props。

<template>
<div>
<button @click="$emit('editAllLocationOpen', false)">关 闭</button></div>
</template>
<script>
export default {
  name: 'AllLocation',
  props: {
    allLocationOpen: {
        type: Boolean,
        default: false
      },
  },
}
</script>