vue3实现子组件的v-model

子组件

<template>

    <div >

      <input

        v-model="newData.val"

        v-bind="$attrs"

      >

    </div>

  </template>

  <script lang="ts">

  import { defineComponent, reactive,computed } from 'vue'

  export default defineComponent({

    props: {

      modelValue: String,

    },

    inheritAttrs: false,

    setup(props, context) {

      const newData = reactive({

        val: computed({

          get: () => props.modelValue || '',

          set: (val) => context.emit('update:modelValue', val)

        }),

        error: false,

        message: ''

      })

      return {

        newData

      }

    }

  })

  </script>

setup语法糖写法

<template>

    <div >

      <input

        v-model="newData.val"

        v-bind="$attrs"

      >

    </div>

  </template>

  <script setup>

  import { defineComponent, reactive,computed } from 'vue'

  const props = defineProps({

    modelValue: {

        type: String,

        default: ''

    }

  })

  const emit = defineEmits(['update'])

  const newData = reactive({

    val: computed({

        get: () => props.modelValue || '',

        set: (val) => emit('update:modelValue', val)

    }),

    error: false,

    message: ''

    })

  </script>

父组件引用

<put v-model="ob"></put>

 const ob = ref(2)

使用vue3的defineModel实现

1、因为defineModel的实现属性在vue3默认中是关闭的需要配置在vite.config.ts文件中配置，vue()里面配置为defineModel配置为true

export default defineConfig({
    plugins: [
        vue({
            script: {
                defineModel: true
            }
        })
    ]
})

2子组件中

<template>
    <div >
      <div>1、 
        <input
        v-model="newData.val"
        v-bind="$attrs"
      >
      </div>
      <div>
        2、
        <input
        v-model="newData.b"
        v-bind="$attrs"
      >
      </div>
    </div>
  </template>
  
  <script setup>
  const newData = defineModel()
  </script>

3、父组件

<put v-model="ob"></put>
<script setup>
const ob = ref({
        val: 1,
        b: 2
    })
</script>