Vue3-新特性defineOptions和defineModel示例详解

<script setup>
import { defineOptions } from 'vue'
defineOptions({
  name: 'Foo',//组件重命名
  inheritAttrs: false,
  //...更多自定义属性
})
</script>

<Child v-model="isVisible">
//相当于
<Child :modelValue="isVisible" @update:modelValue="isVisible=$event">

<template>
  <inputModel v-model="txt"></inputModel>{{ txt }}
</template>
<script setup>
import inputModel from '@/components/inputModel.vue'
import { ref } from 'vue'
const txt = ref(100)
</script>

<script setup>
import { defineProps, defineEmits } from 'vue'
defineProps({
  modelValue: String
})
const emit = defineEmits(['update:modelValue'])
</script>
<template>
  <div>
    <input type="text" :value="modelValue" @input="e => emit('update:modelValue', e.target.value)">
  </div>
</template>
<style scoped>
input {
  width: 14rem;
  height: 2rem;
}
</style>

<script setup>
import { defineModel } from 'vue'
const modelValue = defineModel()
</script>
<template>
  <div>
    <input type="text" :value="modelValue" @input="e => modelValue = e.target.value">
  </div>
</template>

    {
      script: {
        defineModel: true
      }
    }