vue使用v-model封装组件
我们使用Vue开发项目,如何使用v-model来封装组件呢?调用组件:如果改进之处,请各位大神指正,谢谢!
·
我们使用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', e.target.value)
}
}
}
</script>
调用组件:
<template>
<Child v-model="test" :type=" 'number' "
</template>
<script>
import Child from './child.vue'
export default {
name: 'Father',
components: { Child },
data() {
return {
test: '这是父组件‘,
}
},
watch: {
test(value) {
console.log(value)
}
}
}
</script>
更多推荐
已为社区贡献6条内容
所有评论(0)