vue中slot的用法

在Vue中，slot用于在父组件中传递内容到子组件中。可以通过在子组件中使用<slot></slot>标签来创建一个插槽，父组件可以在子组件标签中插入内容，这些内容将会被渲染到子组件中的插槽位置。

下面是slot的用法示例：

<!-- 子组件 MyComponent.vue -->
<template>
  <div>
    <h2>Welcome to MyComponent</h2>
    <slot></slot>
  </div>
</template>

<!-- 父组件 App.vue -->
<template>
  <div>
    <my-component>
      <p>This is the content passed to MyComponent</p>
    </my-component>
  </div>
</template>

在上面的示例中，<slot></slot>标签被插入到子组件的模板中。在父组件中，我们在<my-component>标签中插入了<p>标签，这个<p>标签的内容将会被渲染到子组件中的插槽位置。

当子组件有多个插槽时，可以给插槽起个名字，以便在父组件中指定要插入的内容。例如：

<!-- 子组件 MyComponent.vue -->
<template>
  <div>
    <h2>Welcome to MyComponent</h2>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<!-- 父组件 App.vue -->
<template>
  <div>
    <my-component>
      <template v-slot:content>
        <p>This is the content passed to MyComponent</p>
      </template>
      <template v-slot:footer>
        <p>This is the footer passed to MyComponent</p>
      </template>
    </my-component>
  </div>
</template>

在上面的示例中，我们定义了两个插槽，一个命名为content，另一个命名为footer。在父组件中，我们使用<template>标签来指定要插入的内容，并用v-slot指令来设置插槽的名称。

需要注意的是，v-slot指令只能用在<template>标签上，如果要使用简化语法，则可以将<template>标签替换为<slot>标签，并使用#来指定插槽的名称。

<!-- 父组件 App.vue -->
<template>
  <div>
    <my-component>
      <p slot="content">This is the content passed to MyComponent</p>
      <p slot="footer">This is the footer passed to MyComponent</p>
    </my-component>
  </div>
</template>

上面的示例与之前的示例等价，只是使用了简化的语法。