vue2.7下setup语法糖自定义组件name与自定义model

近期公司的新项目技术栈使用的是vue2.7+vite，而vue2.7作为vue2的最后一个版本，反向移植了了vue3的compositionAPI这一优秀特性，这样也可以在vue2中愉快的使用setup了~~。不过在vue2.7+vite的开发模式下，也遇到了一些因setup语法糖引起的一些问题，组件需要使用自定义name，并且需要自定义model，经过查找相关搜索，找到了一个用于vue3自定义组件name的插件unplugin-vue-define-options，搜索这个插件的gitHub，发现同时也适用于vue2.7，于是乎开始安装、配置 

npm install unplugin-vue-define-options --save-dev

或者

yarn add unplugin-vue-define-options --dev

 vite.config.js配置

import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue2'
import defineOptions from 'unplugin-vue-define-options/vite'; // 在此处导入插件

export default defineConfig({
  plugins: [
    vue(),
    defineOptions(), // 在此处调用
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.vue', '.css', '.scss']
  }
});

配置后组件中使用

<script setup>
  defineOptions({
    name: 'DefineComponent',
  });
  // some code……
</script>

此时解决了setup语法糖中组件自定义name的问题，但还有一个问题，就是如何在vue2.7中自定义model。以往options API式的写法只需定义一个model属性，配置event和prop即可自定义model，而vue3的自定义model与vue2.7的写法又不一样，继续搜索相关的解决方案，并未发现有关解决vue2.7下在使用setup语法糖时如何自定义model（也许是我没搜到~~），自己也尝试了各种可能的解决方法，但是都不奏效~~，正准备退而求其次，使用.sync修饰符的方式实现类似v-model的功能，突然想到既然unplugin-vue-define-options这个插件能解决组件自定义name这个盲区的问题，会不会也可以解决自定义model这个问题？抱着试一试的想法配置了一下，我去竟然成功了~~~

<script setup>
  defineOptions({
    name: 'DefineComponent',
    model: {
      event: 'change',
      prop: 'value'
    }
  });
</script>

由此可见，此插件可以用于解决在setup语法糖下类似不可直接配置的问题，在官方未提供此类组件配置项的API的时候，这个插件真是帮了大忙了~~~ 在此也推荐给有类似需求的小伙伴们