vue slot 使用

Vue.js中的slot是用来创建可复用组件模板的部分，它允许你在父组件的模板中插入子组件的内容，就像是在HTML中使用`<template>`标签一样。Slot的主要作用是内容分发，通过设置`v-slot`或直接在元素上使用`slot`属性，你可以自定义父组件中特定部分的行为。

以下是基本的使用步骤：

1. **定义slot**: 在子组件的模板中，可以定义一个或多个slot标签，比如`<template v-slot:my-slot>...</template>`。

2. **在父组件引用slot**: 父组件通过`<child-component><slot name="my-slot"></slot></child-component>`引用子组件的slot，并指定slot的名称（name属性）。

3. **传递内容到slot**: 当我们在父组件的某个地方有相关的数据或需要插入的部分，可以直接放入这个slot中，`<div slot="my-slot">这是要插入的内容</div>`。

4. **动态绑定slot**: 如果你想让内容根据条件动态变化，可以在父组件内使用v-if、v-else等指令来控制哪些内容进入slot。