文章内容
2023/2/8 16:02:54,作 者: 黄兵
<script setup> cannot contain ES module exports.
最近在使用 Vue3 编写项目的时候出现了如下错误：
<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/22
解决方案：
<script lang="ts">
import {defineComponent} from 'vue'
// 接收父组件传递过来的值
export default defineComponent({
setup(props) {
// 该入参包含了当前组件定义的所有 props
console.log(props)
},
关于 <script setup> 的一些说明：
在 Vue 3.0 的 .vue 组件里，遵循 SFC 规范要求（注：SFC，即 Single-File Component，.vue 单组件），标准的 setup 用法是，在 setup 里面定义的数据如果需要在 template 使用，都需要 return 出来。
如果你使用的是 TypeScript ，还需要借助 defineComponent 来帮助你对类型的自动推导。
<!-- 标准组件格式 -->
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup () {
// ...
return {
// ...
}
}
})
</script>
script-setup 的推出是为了让熟悉 3.0 的用户可以更高效率的开发组件，减少一些心智负担，只需要给 script 标签添加一个 setup 属性，那么整个 script 就直接会变成 setup 函数，所有顶级变量、函数，均会自动暴露给模板使用（无需再一个个 return 了）。
Vue 会通过单组件编译器，在编译的时候将其处理回标准组件，所以目前这个方案只适合用 .vue 文件写的工程化项目。
<!-- 使用 script-setup 格式 -->
<script setup lang="ts">
// ...
</script>
参考资料：
评论列表