轻松解决 Vue3 中的 setup() 函数报错：告别 “script setup cannot contain ES module exports” 的困扰

2023-04-18 13:54:52

处理 Vue3 中的 “script setup cannot contain ES module exports” 错误

简介

在使用 Vue3 时，您可能会遇到一个令人困惑的报错：“script setup cannot contain ES module exports”。这个错误表明你在 setup() 函数中使用了 ES 模块导出，这在 Vue3 中是不允许的。本文将深入探讨这个错误的原因和解决方案，帮助你轻松地继续开发 Vue3 应用。

错误原因

Vue3 中的 setup() 函数是一个特殊的函数，用于初始化组件状态和行为。它与 ES 模块导出不兼容，因为这会干扰 Vue3 对组件的管理方式。

解决方法

解决此错误有三种主要方法：

1. 使用 return 语句

你可以使用 return 语句来返回一个对象，其中包含组件的选项。这个对象可以包含数据、方法、生命周期钩子等。

const MyComponent = {
  setup() {
    return {
      count: 0
    }
  }
}

2. 使用 export default

如果你需要在 setup() 函数中导出一个对象，你可以使用 export default 语法。这允许你在组件中直接使用 setup() 函数返回的对象，而无需显式地使用 import 语句。

export default {
  setup() {
    return {
      count: 0
    }
  }
}

3. 使用 defineProps() 和 defineEmits()

在 Vue3 中，你可以使用 defineProps() 和 defineEmits() 来声明组件的 props 和 emits。这允许你在 setup() 函数中直接访问 props 和 emits，而无需使用 ES 模块导出。

const MyComponent = {
  setup() {
    const props = defineProps(['count'])
    const emit = defineEmits(['increment'])

    return {
      count: props.count,
      increment() {
        emit('increment')
      }
    }
  }
}