formPrimitive.vue 583 B

12345678910111213141516171819202122
  1. <script setup lang="ts">
  2. import { useVModel } from "@vueuse/core";
  3. // 声明 props 类型
  4. export interface FormProps {
  5. data?: string;
  6. }
  7. // 声明 props 默认值
  8. // 推荐阅读:https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
  9. const props = withDefaults(defineProps<FormProps>(), {
  10. data: () => ""
  11. });
  12. // 使用 vueuse 的双向绑定工具
  13. const emit = defineEmits(["update:data"]);
  14. const data = useVModel(props, "data", emit);
  15. </script>
  16. <template>
  17. <el-input v-model="data" class="w-[220px]!" placeholder="请输入内容" />
  18. </template>