Vue.js:在子组件的插槽中动态呈现html

在Vue.js中，插槽（Slots）是一种分发内容的机制，它允许你在组件内部预留一个或多个位置，然后在父组件中填充这些位置的内容。动态呈现HTML内容通常涉及到v-html指令的使用，但需要注意的是，直接使用v-html可能会导致跨站脚本攻击（XSS），因此在使用时要非常小心。

基础概念

插槽（Slots）：Vue.js中的一个功能，允许父组件向子组件内部插入内容。
具名插槽（Named Slots）：允许定义多个插槽，并通过名称来区分它们。
作用域插槽（Scoped Slots）：允许子组件将数据传递回插槽内容。
v-html指令：用于将字符串作为HTML插入到元素中。

类型

默认插槽：没有指定名称的插槽。
具名插槽：通过<slot name="name">定义的插槽。
作用域插槽：通过<slot v-bind:data="data">定义的插槽，允许传递数据到父组件。

应用场景

布局组件：如导航栏、页脚等，可以在不同的地方使用相同的布局，但填充不同的内容。
列表组件：如表格、卡片列表等，可以通过插槽自定义每一项的内容。

示例代码

以下是一个简单的例子，展示了如何在Vue 3中使用具名插槽和v-html来动态呈现HTML内容：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <header>
      <slot name="header">Default Header</slot>
    </header>
    <main>
      <!-- 使用v-html动态渲染HTML内容 -->
      <div v-html="dynamicHtml"></div>
    </main>
    <footer>
      <slot name="footer">Default Footer</slot>
    </footer>
  </div>
</template>

<script>
export default {
  props: {
    dynamicHtml: String
  }
}
</script>

<!-- 父组件 ParentComponent.vue -->
<template>
  <ChildComponent :dynamicHtml="htmlContent">
    <template #header>
      <h1>Custom Header</h1>
    </template>
    <template #footer>
      <p>Custom Footer</p>
    </template>
  </ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      htmlContent: '<p>This is <strong>dynamic</strong> HTML content.</p>'
    };
  }
}
</script>