vue3的组件v-model初探2

按照vue3的组件v-model初探1,把:value 用 v-model来替代,并使用computed计算属性

子组件:

<template>
 <div>
  <input v-model="val">
  <div>{{ modelValue }}---{{ val }}</div>
 </div>
</template>
<script lang='ts'>
import { computed, defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'vInput',
  props: {
    modelValue: String
  },
  setup(props, context) {
    const val = ref(computed({
      get: () => props.modelValue || '',
      set: v => { context.emit('update:modelValue', v) }
    }))
    return {
      val
    }
  }
})
</script>
原文地址:https://www.cnblogs.com/shine-lovely/p/14713259.html