Vue高级特性「四」--自定义 v-model
2020-10-27 本文已影响0人
loushumei
父组件 index.vue
<p>{{name}}</p>
<CustomVmodel v-model="name" />
子组件 CustomVmodel.vue
<template>
<div>
<input type="text"
:value="text1"
@input="$emit('change1',$event.target.value)"
>
<!--
1. 上面input 使用了 :value 而不是v-model
2. 上面的change 和 model.event 要对应起来
3. text1属性对应起来
-->
</div>
</template>
<script>
export default {
model:{
prop:'text1',//对应 props text
event:'change1'
},
props:{
text1:String,
default(){
return ''
}
},
};
</script>