嵌套 v-model 解决 Unexpected mutation of “XXX“ prop `vue/no-mutating-props`

嵌套 v-model 解决 Unexpected mutation of “XXX” prop vue/no-mutating-props

---

我们在进行 Vue 开发的时候，经常会遇到一些对可使用 v-model 的组件包装嵌套的需求，但若使用不慎，就会引发 vue/no-mutating-props 的问题。本文将记录一种在 v-model 嵌套时的做法，以避免这个问题。

本文使用 Vue 3 语法。

---

1. 问题复现

我们以 Naive UI 框架库中的 NDrawer 组件 为例，这个组件可以通过 v-model:show="" 的方式控制抽屉的开关：

不过我们需要对这个组件进行二次封装来满足更多的需求，我的封装代码如下：

我们可以发现报错如下（需要安装 ESLint 插件，VSCode 才会显示行内错误）：

即，我们对 prop 的内容进行了修改，违反了单向数据流原则。

参考链接：

• Vue Doc 单向数据流原则
• ESLINT Plugin Vue: vue/no-mutating-props

---

2. 问题分析

实际上，v-model 仅仅是一个语法糖而已，它的原理是：父组件通过 props 传入变量，子组件通过事件把更新后的变量值 emit 出来，再由父组件进行事件处理。

所以实质上，在子组件内，我们并不可以直接将 prop 的变量应用于子组件深层次组件的 v-model 上（因为 v-model 会隐含的对 prop 值更新），故上图的用法是肯定会触发错误的。

参考链接：

• Vue Doc - 表单输入绑定
• Vue Doc - 在组件上使用 v-model

---

3. 问题解决

解决的方法也非常简单，以上图为例，我们仅需要将 openDrawer 通过中间变量进行 v-model 化，再把中间变量传入子组件深层次组件的 v-model 即可：


我们利用一个计算属性 showDrawer 来实现 v-model，将其 getter 设置为从 prop 的 openDrawer 初始化，而 setter 的内容就是将新的值 emit 出去。

这样，showDrawer 这个中间变量（计算属性）便可以应用到 NDrawer 的 v-model 上了。

子组件在父组件中的调用代码如下：

参考链接：

• Vue Doc - 在组件上使用 v-model
• Vue Doc - v-model 参数