v-model 笔记、 v-model 报错问题记录

虽然使用了 vue 这么久了， 但是对 组件上 使用 v-model 一直处于能用的阶段，没有深入研究。恰巧 昨天，后端同事在弄 pc 经办的业务的时候，跟我说浏览器控制台报错，后来我看了下，就是 V-model 的问题导致的。刚好借此机会，详细看下 v-model 在vue组件上的使用。

问题复现

问题截图

代码调用逻辑

这么看，代码的调用逻辑确实没有问题，为啥点击关闭的时候。浏览器控制台会怎么会提示报错呢。

错误排查

修改了 v-model 之后，浏览器控制台，就没有报错了。应该是 v-model 导致的。下面就详细看下 v-model 的知识，之前也只是停留在用的层面，理解的不是很深入。

解决方案

v-model 传入的数据，不要从 props 中拿，应该在 data 中重新定义一个变量，就可以了。

总结：

在使用vue 子组件的时候，通过 v-model 传入的数据，不要是 props ，要是一个 data 定义的数据。这样控制台就不会报错了。

v-model

• 定义：v-model 是 Vue.js 中用于实现双向数据绑定的指令。它可以在表单元素和 Vue 实例之间创建一个响应式的连接，使得数据的变化能够自动反映在界面上，反之亦然

在自定义组件上使用 v-model v-model是vue中的一个指令，可以在表单控件或者组件上创建双向绑定。 实际上它只是一个语法糖，vue会自动在元素或者组件上添加value属性和input事件

<!-- vue表单控件写法 -->
<input v-model="val" />
<!-- 等价于 -->
<input :value="val" @input="($event) => val = $event.target.value" />
<!-- vue表单控件写法 --><input v-model="val" />

<!-- vue组件写法 -->
<MyComponent v-model="val" />
<!-- 等价于 -->
<MyComponent :value="val" @input="(e) => val = e" />

.sync 和 v-model 的区别 在组件中使用v-model通过props接收值和emit传值，同我们自己在父组件上绑定一个属性和emit传值，同我们自己在父组件上绑定一个属性和emit传值，同我们自己在父组件上绑定一个属性和emit传值可以少一步在父组件中监听@input的操作，所以在组件使用v-model也是很丝滑的。

链接

• vue中的v-model刨根问底# vue中的v-model刨根问底