我们使用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>
Logo

前往低代码交流专区

更多推荐