我们使用Vue开发项目,如何使用v-model来封装组件呢?
<template>
<input :value="value" :type="type" @keyup="keyup">
</template>
<script>
export default {
name:'Child',
model: {
prop: 'value',
event: 'input', // 如果是input 标签 可以不用model进行转换
},
props: {
value: {
type: null,
default: null,
},
},
methods: {
keyup(e) {
this.$emit('input', )
}
}
}
</script>
调用组件:
<template>
<Child v-model="test" :type=" 'number' "
</template>
<script>
import Child from './'
export default {
name: 'Father',
components: { Child },
data() {
return {
test: '这是父组件‘,
}
},
watch: {
test(value) {
(value)
}
}
}
</script>