vue插槽（slot）详细解读

sugar-T

已于 2024-03-13 16:18:13 修改

阅读量598

点赞数 10

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： vue.js javascript 前端

于 2024-03-11 15:17:52 首次发布

本文链接：https://blog.csdn.net/qq_43536788/article/details/136624892

在 Vue.js 中，slot（插槽）是一个强大的功能，它允许你创建可复用的组件，同时允许父组件为子组件的某些部分提供自定义的 HTML 结构。通过插槽，你可以定义组件的模板结构，并在使用时由父组件来决定具体的内容。

基础插槽

在 Vue 组件中，你可以使用 <slot> 标签来定义插槽。如果父组件没有为这个插槽提供内容，那么 <slot> 标签内可以有一些默认内容。

子组件（ChildComponent.vue）:

<template>
  <div>
    <h2>我是子组件</h2>
    <slot>如果没有提供插槽内容，这里会显示。</slot>
  </div>
</template>

父组件:

<template>
  <div>
    <ChildComponent>
      <p>这是父组件提供的插槽内容。</p>
    </ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>

在这个例子中，父组件提供的 <p> 标签内容会替换子组件 <slot> 标签内的默认内容。