手写实现v-modle双向绑定
父组件index.vue,子组件CustomVMode.vue
1 在父组件中引入子组件。
<p>{{name}}</p>
<CustomVModel v-model="name"></CustomVModel>
2.子组件CustomVMode.vue
<template>
<input :value="text" type="text" @input="$emit('change', $event.target.value)" />
</template>
<script>
export default {
name: "CustomVModel",
model: {
prop: "text",
event: "change"
},
props: {
text: {
type: String,
default: ""
}
}
};
</script>
3.解析:
(1)上面的input 使用了:value 而不是v-model
(2)上面的change和model的event对应起来。
(3)text属性对应起来。