首先我们需要知道:
v-model实际上只是一个语法糖:
<input v-model=”password”>
作用与以下相似:
<input type=”text” :value=”password” @input=”password=$event.target.value”>
也就是通过v-model传递的值,最终是传递给了子组件props中value属性,子组件修改value值需要通过触发input事件并传递需要修改的值给父组件。
如果知道了这个, 那我们封装一个 简单的input 组件就很简单了~
父组件
1 2 |
<aaa v-model="vvvalue" /> <div class="p">{{ vvvalue }}</div> |
子组件
1 |
<input @input="$emit('input', $event.target.value)" type="text" /> |