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>

 

posted @ 2021-04-28 11:08  shine_lovely  阅读(94)  评论(0编辑  收藏  举报