vue三种插槽的用法案例

Vue 中有三种常用的插槽，分别是默认插槽、具名插槽和作用域插槽。下面是它们的具体用法案例。

1. 默认插槽

默认插槽是最常用的插槽，它可以用来传递任意内容。下面是一个例子：

<!-- 父组件 -->
<template>
  <div>
    <h1>默认插槽示例</h1>
    <child-component>
      <p>这是通过默认插槽传递的内容。</p>
    </child-component>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <h2>子组件</h2>
    <slot></slot>
  </div>
</template>

在上面的例子中，父组件中使用了默认插槽传递了一个 `<p>` 标签到子组件中，并且子组件中使用了 `<slot>` 标签来渲染插槽内容。

2. 具名插槽

具名插槽可以用来传递多个插槽，并且可以为每个插槽命名。下面是一个例子：

<!-- 父组件 -->
<template>
  <div>
    <h1>具名插槽示例</h1>
    <child-component>
      <!-- 通过 name 属性指定插槽名称 -->
      <template v-slot:header>
        <h2>这是头部插槽的内容。</h2>
      </template>
      <template v-slot:footer>
        <h2>这是底部插槽的内容。</h2>
      </template>
    </child-component>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <h2>子组件</h2>
    <slot name="header"></slot>
    <slot name="footer"></slot>
  </div>
</template>

在上面的例子中，父组件中使用了具名插槽传递了两个插槽到子组件中，分别是头部插槽和底部插槽，并且子组件中使用了 `<slot>` 标签并通过 name 属性指定了插槽名称。

3. 作用域插槽

作用域插槽可以用来传递数据到插槽中，并且可以在插槽中使用这些数据。下面是一个例子：

<!-- 父组件 -->
<template>
  <div>
    <h1>作用域插槽示例</h1>
    <child-component>
      <!-- 通过 v-slot:default 定义默认插槽 -->
      <template v-slot:default="slotProps">
        <p>{{slotProps.text}}</p>
        <button @click="slotProps.onClick">点击</button>
      </template>
    </child-component>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <h2>子组件</h2>
    <!-- 定义 props -->
    <slot :text="text" :onClick="onClick"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '这是通过作用域插槽传递的文本。',
    };
  },
  methods: {
    onClick() {
      alert('点击了按钮！');
    },
  },
};
</script>

在上面的例子中，父组件中通过作用域插槽传递了一个文本和一个点击事件到子组件中，并且子组件中使用了 `<slot>` 标签，并且通过 props 将数据传递给插槽，然后在插槽中使用这些数据。