vue 父组件给子组件传递对象,子组件直接用v-model修改不会报错,但是传一个字段不用对象包裹,子组件用v-model绑定修改会报错是什么原因
时间: 2024-05-11 16:19:32 浏览: 121
解决vue 子组件修改父组件传来的props值报错问题
5星 · 资源好评率100%
这是因为在 Vue.js 中,v-model 指令实际上是一个语法糖,它相当于同时绑定了一个 value 属性和一个 input 事件。当你在子组件中使用 v-model 绑定一个简单类型的属性时,Vue.js 实际上会将其转化为以下形式:
```html
<child :value="someProp" @input="someProp = $event">
```
可以看到,v-model 本质上是一个语法糖,它绑定的是一个 value 属性和一个 input 事件。当你在子组件中使用 v-model 绑定一个简单类型的属性时,Vue.js 期望你的组件会触发一个名为 input 的事件,并将新的值作为 $event 对象传递给父组件。因此,如果你直接在子组件中修改一个简单类型的属性时,并不会触发 input 事件,这就会导致 Vue.js 报出警告。
而当你在子组件中使用 v-model 绑定一个对象类型的属性时,Vue.js 会将其转化为以下形式:
```html
<child :value="someObjectProp" @input="someObjectProp = $event">
```
可以看到,v-model 仍然绑定的是一个 value 属性和一个 input 事件。但是在子组件中修改对象类型的属性时,由于对象是引用类型,修改某个属性实际上是在修改对象本身,因此会触发 input 事件,从而不会产生警告。
阅读全文