在script setup中正确导出emitter实例

Question

在script setup中怎么传递emitter实例，用能正确的使用Events 泛型

export const emitter = mitt<Events>()

会报错误

./src/components/ValidateForm.vue?vue&type=script&lang=ts&setup=true (./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/ts-loader??ref--14-1!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/components/ValidateForm.vue?vue&type=script&lang=ts&setup=true)
Module Error (from ./node_modules/vue-loader-v16/dist/index.js):
[@vue/compiler-sfc] <script setup> cannot contain ES module exports. If you are using a previous version of <script setup>, please consult the updated RFC at https://github.com/vuejs/rfcs/pull/227.

/Users/wuhelong/Documents/视频学习课程/慕课网/Vue3.0+Typescript/zheye/src/components/ValidateForm.vue
14 |  type ValidateFunc = () => boolean
15 |  // 实例化 mitt
16 |  type Events = { 'form-item-created': ValidateFunc }
   |                                                      ^
17 |  export const emitter = mitt<Events>()
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
18 |  const emit = defineEmits(['form-submit'])

Answer 1

张轩 2021-12-20 09:33:10

同学你好 这个错误和泛型以及ts 都没有关系，这个是 script setup 的限制, 由于它会自动导出给模版使用，所以在这里限制普通的 es modules 的导出，对于这个文件，建议同学不要使用 vue script setup 的形式

• 提问者 逸晟 #1

  多谢老师

• 刚仔 #2

  这个还有其他的解决方案吗，我自己的项目代码都写好多了 script setup形式

• 张轩 回复 刚仔 #3

  同学你好 可以将这些模块单独挪到一个 ts 文件中，不要在 setup 中写。

点开查看后面1条评论