Vue.js - ReferenceError：defineProps 未定义

Question

我有一个 Vue 3 应用程序。这个应用程序依赖于Vite、Vue Router、Pinia。具体版本有：

• 视图：3.2.31
• Vue 路由器：4.0.13
• 皮尼亚：2.0.11

该应用程序有一个代表“页面”的文件组件。这个单个文件组件的定义如下：

页面.vue

<template>
  <div>
    Hello! Thank you for visiting {{ id }}!
  </div>
</template>

<script setup>
    import { onMounted } from 'vue';
    import { useStore } from '../stores/store';

    const myStore = useStore();

    onMounted(() => {
        const props = defineProps({ id:Number });    
        console.log(props);
    });
</script>

我的目标是当有人访问 时https://[my-site].com/pages/{some-id}，我会id通过 URL 获取传入的信息。目前，我的路线定义如下：

{
  path: '/pages/:id',
  name: 'page',
  component: () => import('../views/page.vue'),
  props: true
}

根据我的理解，由于id是我的路线上的参数，因此我可以使用该[defineProps][1]方法。当加载单个文件组件时，我没有看到id. 此外，当我查看控制台日志时，我看到以下内容：

未捕获（承诺中）ReferenceError：defineProps 未定义

我不明白为什么我会收到此错误。我见过的其他问题提到了更改 ESLINT。但是，我没有在我的应用程序中使用 ESLINT。我用的是维特。我该如何修复这个错误？

Answer 1

我用更简单的代码遇到了同样的错误。我通过在package.json中添加一个条目消除了错误（使用 Webstorm 创建的项目...）

"eslintConfig": {
"root": true,
"env": {
  "node": true,
  "vue/setup-compiler-macros": true
},
"extends": [
  "plugin:vue/vue3-essential",
  "eslint:recommended"
]
}

这个网站帮助我解决了我的问题：ESLint | 修复定义属性

Answer 2

defineProps是一个用于在<script setup>. 宏被编译掉，并且不能位于生命周期挂钩内，正如您在onMounted(). 此外，在内部定义 props 没有意义，onMounted()因为 props 需要在组件安装之前存在。

\n

道具必须在上下文的顶层声明<script setup>：

\n

<script setup>\n    import { onMounted } from \'vue\';\n    import { useStore } from \'../stores/store\';\n\n    const myStore = useStore();\n\n    const props = defineProps({ id:Number }); // \xe2\x9c\x85\n\n    onMounted(() => {\n        // const props = defineProps({ id:Number }); // \xe2\x9d\x8c move to top level\n        console.log(props);\n    });\n</script>\n

\n

Answer 3

如果您使用<script setup> with toRefs(defineProps())则会出现此错误。

解决方案可以在这个 stackoverflow 答案中找到。

长话短说：

import { toRefs, defineProps } from 'vue';

// This throws an error:
// const { myProp } = toRefs(defineProps({ myProp: Object }));

// Break it into two lines and the error goes away:
const props = defineProps({ myProp: Object });
const { myProp } = toRefs(props);