vue的插槽原来该这样理解

当我们在开发Vue组件时，有些情况下需要动态地处理组件内部的内容。Vue提供了插槽（ Slot ）来解决这个问题。通过使用插槽，我们可以将父组件中的任意内容插入子组件中的指定位置，从而实现一种非常灵活的组件封装和组合方式。

一、插槽的用法和基本原理

1.1 插槽基础使用

插槽的基本原理是以 标签作为承载位置，用于显示父组件中传递过来的内容。

下面是一个例子：

<!--  父组件 -->
<template>
  <div>
    <h2>父组件使用插槽，下面展示子组件：</h2>
    <slot>
      <!-- 默认内容填充 -->
      <p>这里是默认内容</p>  
    </slot>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <h3>子组件内容：</h3>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

在父组件中，使用了 标签，并提供了默认内容。在子组件中，使用了同名 标签，以便在需要时渲染插槽内容。

当子组件没有需要填充插槽的内容时，默认内容会被渲染出来。但是，如果在父组件中传递了一些内容，那么这些内容会被渲染到插槽内。

<!-- 父组件使用插槽，插入了子组件内容 -->
<my-component>
  <p>插入到 my-component 子组件中的内容</p>
</my-component>

如上所示，通过在父组件中插入内容，我们就可以在子组件中动态地渲染它们，在父组件中插入的内容最终会被渲染到子组件中的同名插槽中。

1.2 插槽属性传递

插槽不仅仅是用来承载内容的，它还可以接受属性（ Props ）的传递，这样我们就可以实现更加灵活的内容控制和组件复用。

下面的例子演示了如何将属性传递到插槽中：

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件使用插槽，下面展示子组件：</h2>
    <my-component :title="title">
      <template v-slot:content="{ data }">
        <p>{{ data }}</p>
      </template>
    </my-component>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <h3>{{ title }}</h3>
    <div>
      <slot name="content" v-bind:data="slotData"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "my-component",
  props: {
    title: String,
  },
  data() {
    return {
      slotData: "这里是插槽的数据",
    };
  },
};
</script>

在父组件使用