vue slot插槽用法详解

文件示例

<template>
  <slot-style>
    
    <template #default="scope">
      {{ scope.itemVal }}
    template>
    <template #slotName3="scope2">
      {{ scope2.slotName }}{{ scope2.hai }}
    template>
    <template #slotName> hello template>
    <template #slotName2> world template>
  slot-style>
template>

<script>
import slotStyle from "@/components/slotStyle.vue";
export default {
  components: { slotStyle },
  setup() {},
};
script>```


子组件
```html
<template>
  <div v-for="item in arr" :key="item">
    <slot :itemVal="item">slot>
  div>
  <slot name="slotName3" :slotName="name" hai="嗨！">slot>
  <slot name="slotName">slot>
  <slot name="slotName2">slot>
template>



<script>
import { reactive, ref } from "vue";
export default {
  setup() {
    let arr = reactive([1, 2, 3, 4, 5]);
    let name = ref("你妈的逼");
    return { arr, name };
  },
};
script>



# 作用简介
<slot> 元素作为承载分发内容的出口。
它允许你像这样合成组件：

```html
<todo-button>
  Add todo
todo-button>

然后在 的模板中，你可能有：

<button class="btn-primary">
  <slot>slot>
button>

不过，字符串只是开始！插槽还可以包含任何模板代码，包括 HTML，已经其他组件

具名插槽

<div class="container">
  <header>
    
    <slot name="header">slot>
  header>
  <main >
   <slot>slot>
    
  main>
  <footer>
  <slot name="foter">slot>
    
  footer>
div>

插槽写法

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page titleh1>
  template>

  <template v-slot:default>
    <p>A paragraph for the main content.p>
    <p>And another one.p>
  template>

  <template v-slot:footer>
    <p>Here's some contact infop>
  template>
base-layout>

作用域插槽

<ul>
  <li v-for="( item, index ) in items">
    <slot :item="item">slot>
  li>
ul>

<todo-list>
  <template v-slot:default="slotProps">
    <i class="fas fa-check">i>
    <span class="green">{{ slotProps.item }}span>
  template>
todo-list>

具名插槽的缩写

看第一个例子 v-solt 可缩写成#