如何在 Vue 中输入类属性？

Question

根据https://vuejs.org/guide/essentials/class-and-style.html上的文档，Vue 中的类绑定可以接受字符串、数组和对象。

当设置一个组件来接受一个class （例如someInnerComponentClass ）时，最好的类型是什么？

如果我只传递一个字符串，这会起作用，但我希望它接受数组和对象，就像我在根上设置它一样:class="['some-class', { 'conditional-class': myFlag }]"元素：

const props = defineProps<{ class?: string }>();

我可以尝试构建自己的类型来接受字符串、字符串数组、对象数组等，但我觉得已经有一种类型可以捕获我可以导入的类型，不是吗？

我的 IDE (WebStorm) 将 class prop 视为常规属性：

Answer 1

我还没有在 Vue 的核心中找到可用的类型，但是我们可以使用文档的信息来组成我们自己的类型。 它可以是：

• string
• Record<string, boolean> （对象语法）
• (string | Record<string, boolean>)[] (组合)

所以你可以这样做：

type Class = string | Record<string, boolean> | (string | Record<string, boolean>)[];

const props = defineProps<{ class?: Class }>();

Answer 2

https://vuejs.org/guide/components/attrs.html#accessing-fallthrough-attributes-in-javascript

你不应该输入class作为道具，因为它是默认继承的

（并添加到根元素，参见https://vuejs.org/guide/components/attrs.html#disabling-attribute-inheritance绕过）

<script setup>
import { useAttrs } from 'vue'

const attrs = useAttrs()
const klass = attrs.class
</script>