基于道具设置VueJS内部组件属性

Question

也许在VueJS语法中有一些明显的问题，但我无法使这个Button.vueSFC工作：

<script setup>
defineProps({
...
href: String,
...
});
</script>
...
<template>
<Link :href="href"
:as="href == null ? 'button' : null"
:type="href == null ? 'button' : null">
<slot />
</Link>
</template>

我只是想，如果有href，Link就被当作一个锚，使用href。但是如果没有href道具，它将被视为常规按钮，将as="button"和type="button"添加到链接组件属性中。

但是，当实例化Button(例如，使用href="register"(时，我得到的浏览器控制台输出是：

[Vue warn]: Unhandled error during execution of render function 
at <Link href="http://myproject.test/register" as=null type=null  ...> 

在这种情况下，href的值很好，因为提供了href道具，但请查看as=null type=null部分。。。看起来像"；空"；不作为CCD_ 12处理。

顺便说一下，使用Vue3：(

有什么想法吗？提前感谢

Answer 1

如果问题是null，那么您可以尝试此

<Link :href="href"
:as="href == null ? 'button' : a"
:type="href == null ? 'button' : a">
<slot />
</Link>

在惯性链接组件中，作为道具指的是HTML标记名

Answer 2

终于发现了问题。查看Vue3文档时，我发现可选道具在不存在时的评估结果为undefined，而不是像Vue2中那样的null。

然后，在我的代码中，简单地将每次出现的null替换为undefined就完成了任务。