vue 通过插槽 分发内容

Vue通过插槽（slot）分发内容是一种组件化的思想，它可以让父组件向子组件传递内容并在子组件中进行渲染。

首先，在父组件中定义一个插槽，并命名它。可以在父组件的template中使用<slot>标签来定义插槽。例如：

<template>
  <div>
    <slot></slot>
  </div>
</template>

父组件可以在插槽中放置任意内容，比如文本、其他组件等等。

然后，在子组件中使用<slot>标签来接收父组件传递的内容。可以在子组件的template中使用<slot>标签，并指定插槽的名称，以便于父组件向子组件正确传递内容。例如：

<template>
  <div>
    <slot></slot>
  </div>
</template>

当父组件使用子组件的时候，可以将任意内容放置在子组件标签的中间，这些内容会被自动分发到子组件中的插槽部分。例如：

<template>
  <div>
    <my-component>
      <span>这些内容会被分发到子组件中的插槽部分</span>
    </my-component>
  </div>
</template>

在子组件中，使用<slot>标签来接收父组件传递的内容，并在子组件中进行渲染。例如：

<template>
  <div>
    <slot></slot>
  </div>
</template>

通过这种方式，Vue的插槽功能可以让父组件在开发过程中更加灵活，可以将内容动态地传递给子组件，并实现更加可扩展和可重用的组件。