Vue.js - ReferenceError：defineProps未定义

8xiog9wr 于 2023-05-23 发布在 Vue.js

关注(0)|答案(4)|浏览(373)

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

Vue：3.2.31
Vue工艺路线：4.0.13
Pinia：2.0.11

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

page.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}时，我通过URL获得id。目前，我的路线是这样定义的：

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

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

Uncatch（in promise）ReferenceError：defineProps未定义 *

我不明白为什么我会得到这个错误。我看到的其他问题提到了改变ESLINT。但是，我没有在我的应用程序中使用ESLINT。我正在使用Vite。如何修复此错误？

vue.js

来源：https://stackoverflow.com/questions/71412939/vue-js-referenceerror-defineprops-is-not-defined

4条答案

按热度按时间

fafcakar1#

我在一个简单得多的代码中遇到了同样的错误。我通过在我的*package.json中添加一个条目来消除这个错误（使用Webstorm created project...）

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

这个网站帮助我解决了我的问题：ESLint | Fix defineProps

赞(0）回复(0）举报 2023-05-23

snz8szmq2#

defineProps是用于<script setup>的编译器宏。宏会被编译掉，并且不能在生命周期钩子中，正如您在onMounted()中看到的那样。此外，在onMounted()中定义props是没有意义的，因为props需要在组件挂载之前就存在。
prop 必须在<script setup>上下文的顶层声明：

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

    const myStore = useStore();

    const props = defineProps({ id:Number }); // ✅

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

赞(0）回复(0）举报 2023-05-23

hmtdttj43#

如果您使用<script setup> * 和 * toRefs(defineProps())，则会显示此错误。
解在this stackoverflow answer中找到。

TL;DR：

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);

赞(0）回复(0）举报 2023-05-23

xriantvc4#

通过将此添加到eslintrc

"env": {
  "node": true,
  "vue/setup-compiler-macros": true
},

它应该删除eslint错误

赞(0）回复(0）举报 2023-05-23

我来回答

Vue.js - ReferenceError：defineProps未定义

4条答案

相关问题

热门标签

最新问答