v-model在子组件失效的原因

774 阅读1分钟

之前上课没认真听,把v-model跳过了,结果今天就遇到了一个坑,百度了半天都没整明白

这次遇到的是我要绑定input组件的value到remark中,并且由子组件传给父组件,正确写法:

<input class="remark" placeholder='点击输入备注...' 
:value="remark" @input="$emit('update:remark',$event.target.value)"/>
解析:
1.value="remark" 就是绑定了input的value与remark

2.@input="$emit('update:remark',$event.target.value)"
触发input事件时,传递一个$emit,$event.target.value的值改写remark

然后为什么不能使用v-model这个语法糖呢

坑点:在子组件是不可以写v-model的,因为v-model的本质是

:value="remark" @input="remark = $event.target.value"

在子组件里怎么可以这么写呢?我们只能用$emit来改写值,所以这个语法糖失效了,这个问题卡了我20分钟