<template>
<input type="text"
:value="val"
@input="$emit('change', $event.target.value)"/>
</template>
<script>
// 1. 上面的 input 使用了 :value 而不是v-model
// 2. 上面的 change 和 model.event 要对应
// 3. val 属性对应起来
export default{
// 定义一个 model 的配置
model: {
prop: 'val', // 对应 props 的 text
event: 'change'
},
// 接收父组件传递的值
props: {
val: String,
default() {
return ''
}
}
}
</script>
<template>
<div>
<p>{{inputVal}}</p>
<my-input v-model="inputVal"></my-input>
</div>
</template>
<script>
import CustomInput from '../../components/CustomVModel.vue'
export default{
components: {
'my-input': CustomInput
},
data() {
return{
inputVal: '100'
}
}
}
</script>