Vue3 使用 setup 语法糖编写组件定义 props

在  <script setup>  中必须使用  defineProps  和  defineEmits API 来声明  props  和  emits ，它们具备完整的类型推断并且在  <script setup>  中是 直接可用 的：

<script setup>
const props = defineProps({
  foo: String
})
 
const emit = defineEmits(['change', 'delete'])
// setup code
</script>
 

问题描述

来自官方文档：单文件组件 (opens in a new tab)

• defineProps  和  defineEmits  都是只在  <script setup>  中才能使用的编译器宏。他们不需要导入且会随着  <script setup>  处理过程一同被编译掉。
• defineProps  接收与  props  选项 (opens in a new tab)相同的值，defineEmits  也接收  emits  选项 (opens in a new tab)相同的值。
• defineProps  和  defineEmits  在选项传入后，会提供恰当的类型推断。
• 传入到  defineProps  和  defineEmits  的选项会从 setup 中提升到模块的范围。因此，传入的选项不能引用在 setup 范围中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块范围内。

不是说可以直接使用吗？怎么报错了？

 error  'defineProps' is not defined  no-undef

解决

在eslintrc.js 配置：

module.exports = {
  env: {
    'vue/setup-compiler-macros': true,
  },
}

参考链接

• User Guide | eslint-plugin-vue (vuejs.org) (opens in a new tab)

阅读更多