Vue自定义组件内部嵌套HTML内容被忽略该如何解决？

问题原因 #

Vue自定义组件默认不会自动渲染父组件调用时写在组件标签内部的内容，你定义的header-link模板没有预留插槽（Slot） 作为内容出口，所以传入的"About"文本被直接丢弃。另外你看到id属性正常生效，是因为Vue3默认会将组件未声明为props的属性自动透传到根元素上，和内容渲染逻辑无关。

解决方法 #

基础支持传入内容 #

在组件模板的对应位置添加<slot>标签作为内容渲染出口即可，修改后的组件代码如下：

const app = Vue.createApp({});

app.component('header-link',{
    data(){
        return{
            count: 0
        }
    },
    template: `
        <a class="link" href="#">
            <slot></slot>
        </a>
    `
})

app.mount("div#app");

修改后你调用<header-link id="about">About</header-link>就会正常渲染出带内容的a标签。

支持传入自定义HTML内容 #

如果需要传入HTML结构而非纯文本，有两种常用实现方式：

1. 直接在组件标签内写HTML结构，插槽会自动渲染：

<header-link id="about">
  <span class="about-text">About</span>
</header-link>

2. 如果是动态生成的HTML字符串，结合v-html指令使用即可（注意：动态HTML需要确保来源可信，避免XSS攻击）：

<!-- 假设你的Vue实例里有htmlStr变量存了动态HTML内容 -->
<header-link id="about">
  <span v-html="htmlStr"></span>
</header-link>

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