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

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>