Vue3如何基于prop动态配置内部Link组件属性并避免null警告？

问题出在你给as和type绑定了null值——Vue会将null当作有效属性值传递给Link组件，但该组件可能不接受null作为这两个属性的合法输入，因此触发渲染警告。

两种可行的修复方案： #

方案1：用undefined替代null

当不需要传递属性时，绑定undefined，Vue会自动忽略该属性，不会渲染到DOM中：

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

方案2：通过v-bind动态控制属性集合

用对象语法批量控制属性是否传递，代码更简洁：

<template>
<Link :href="href"
      v-bind="href == null ? { as: 'button', type: 'button' } : {}">
    <slot />
</Link>
</template>

两种方案都能实现需求：未传入href时添加as="button"和type="button"；传入href时不传递这两个属性，避免无效值导致的警告。

内容的提问来源于stack exchange，提问作者andcl