Vue通过router-view更新组件props触发Avoid mutating a prop报错如何解决

问题原因 #

你遇到的报错本质是违反了Vue的单向数据流规则：父组件传递给子组件的prop是只读的，子组件不能直接修改，所有对prop的变更操作都需要子组件抛出事件通知父组件，由父组件更新自身的源数据后再同步给子组件。

具体到你的代码，问题出在Navbar组件：

• 导航栏图标的点击事件直接执行drawer = !drawer，修改了父组件传入的drawer prop
• v-navigation-drawer组件用v-model="drawer"双向绑定了drawer prop，v-model默认会修改绑定的变量，同样属于直接修改prop的行为

首次从Home页触发更新是正常的，因为你是通过$emit通知App组件修改自身的drawer数据，符合数据流规则；当你点击Navbar的导航图标操作侧边栏时，就触发了直接修改prop的逻辑，导致报错，后续父子组件的drawer值不同步，功能就失效了。

解决方法 #

步骤1：修改Navbar组件代码 #

不要直接修改drawer prop，所有变更操作都通过$emit抛给父组件处理：

<template>
<nav>
<v-app-bar app fixed class="white">
  <v-app-bar-nav-icon
    class="black--text"
    @click="$emit('update:drawer', !drawer)"
  ></v-app-bar-nav-icon>
  </v-app-bar>
  <v-navigation-drawer
  temporary
  :value="drawer"
  @input="$emit('update:drawer', $event)"
  >
   ...
 </v-navigation-drawer>
</nav>
</template>
<script>
export default {
props:{
drawer:{
  type: Boolean,
  required: true
}
},
};
</script>

步骤2：修改App.vue中Navbar的绑定逻辑 #

利用Vue内置的修饰符自动监听子组件抛出的更新事件，同步父组件的drawer值：

• 如果你用的是Vue2，使用.sync修饰符：

<Navbar :drawer.sync="drawer" />

• 如果你用的是Vue3，使用v-model参数语法：

<Navbar v-model:drawer="drawer" />

原来的Home组件抛事件、App监听router-view事件更新drawer的逻辑无需修改，调整后就不会再触发报错，功能也能正常运行。

内容的提问来源于stack exchange，提问作者H_alt