vue将道具放入未使用的打字稿设置中的组件

Question

我试图将道具带入我的组件中。 找到了此文档： https://vuejs.s.s.org/guide/guide/guide/guide/guide/typescript-croptirect-croptript--croptirect--croptript--compoction--croptription-position-position-position-position-position-position-position--cromit- api.html＃键入 - 典型 - ，它在无处不在的地方引用。 显然，我应该将我的类型放入DefineProps功能中。

<script setup lang="ts">
const props = defineProps({
  foo: { type: String, required: true },
  bar: Number
})

props.foo // string
props.bar // number | undefined - they are not usable in the template if I just define the const...
</script>

因此，我试图将它们放在我的组件上。但是要这样做，我需要在设置中进行STH。

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    message: String
  },
  setup(props) {
    props.message // <-- type: string
  }
})

<template>
    <CNavItem :href="props.href">
    <CIcon customClassName="nav-icon" :icon="icon" />{{label}}</CNavItem>
</template>

<script lang="ts">
import { defineComponent, defineProps } from "vue";
import { CNavItem } from '@coreui/vue';
import { CIcon } from '@coreui/icons-vue';

interface Props {
    label: string;
    href: string;
    icon: any[];
}

const props = defineProps<Props>();
export default defineComponent({
    components: {
        CNavItem,
        CIcon
    },
    setup(props) {
        // I need to do sth with props here I guess, but I do not know how to get it to my template.
        // If I don't the compiler will complain...
    }
});
</script>

我想我在这里有一个Missig链接。那么，如何将我的const props的内容纳入我的模板中？

Answer 1

defineProps只能在＆lt; script设置中使用，（ts或js）。
在您发布的示例中，您正在尝试在＆lt; script＆gt; tag的root中使用它（没有设置属性！），其中它不会工作。

---

要澄清：

• ＆lt; script设置lang =“ ts”＆gt;语法：

<script setup lang="ts">
defineProps({
  foo: Number
})
</script>
<template>
  <div>{{ foo }}</div>
</template>

• ＆lt; script lang =“ ts”＆gt; syntax:

<script lang="ts">
export default {
  props: {
    foo: Number
  }
}
</script>
<template>
  <div>{{ foo }}</div>
</template>

---

See them working here 。

Answer 2

在我看来，您已经混合了两种方式。

您是否尝试过下面的工作？

import { defineComponent } from 'vue'

export default defineComponent({
  // type inference enabled
  props: {
    label: String,
    href: String,
    icon: any[]
  },
  setup(props) {
    props.label // ...
    // ...
  }
})

参见链接。