vue3中的插槽使用

在 Vue 3 中，插槽是一种用于在组件内部承载内容的机制，它允许组件的模板部分拥有可变的结构。Vue 3 中的插槽分为默认插槽和具名插槽两种。

默认插槽

默认插槽是组件中没有被命名的插槽，是最简单的插槽形式，用于接收父组件传递的内容：
使用方式：

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

<script>
export default {
  name: 'MyComponent',
};
</script>

在父组件中使用：

<template>
  <MyComponent>
    <p>This content will be injected into the slot.</p>
  </MyComponent>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
};
</script>

使用场景：
当组件需要接收并渲染父组件传递的内容时，可以使用默认插槽。

具名插槽

Vue 3 中的插槽可以使用 v-slot 指令为插槽起一个名字：
使用方式：

<template>
  <div>
    <slot name="header"></slot>
    <div>
      <!-- 默认插槽 -->
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

在父组件中使用：

<template>
  <MyComponent>
    <template v-slot:header>
      <h1>This is the header slot</h1>
    </template>
    
    <p>This content will be injected into the default slot.</p>
    
    <template v-slot:footer>
      <p>This is the footer slot</p>
    </template>
  </MyComponent>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
};
</script>

使用场景：
当组件的结构需要包含多个具有特定用途的插槽时，可以使用具名插槽。

作用域插槽

作用域插槽是在插槽中传递数据到插槽内容的机制，通过在插槽中使用 v-slot 可以访问父组件传递的数据，Vue 3 中的插槽也可以传递数据到插槽内部。
使用方式：

<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      user: { name: 'John', age: 25 },
    };
  },
};
</script>

在父组件中使用：

<template>
  <MyComponent>
    <template v-slot="{ user }">
      <p>User: {{ user.name }}, Age: {{ user.age }}</p>
    </template>
  </MyComponent>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
};
</script>

使用场景：
当需要在插槽中访问父组件的数据时，可以使用作用域插槽。

动态插槽名

Vue 3 中的插槽名可以动态绑定：

在这里插入代码片<template>
  <div>
    <slot :name="slotName"></slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      slotName: 'header',
    };
  },
};
</script>

在父组件中使用：

<template>
  <MyComponent>
    <template v-slot:[slotName]>
      <h1>This is the dynamically named slot</h1>
    </template>
  </MyComponent>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
};
</script>