一 插槽目的与作用

Vue 将 <slot> 元素作为承载分发内容的出口。
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。
插槽，其实就相当于占位符。

二 插槽基础使用

1、在子组件中放一个占位符

<template>
    <div>
        <h1>今天天气状况：</h1>
        // 设置插槽
        <slot></slot>
    </div>
</template>
<script>
    export default {
        name: 'child'
    }
</script>

2、在父组件中给这个占位符填充内容

<template>
    <div>
        <div>使用slot分发内容</div>
        <div>
            <child>
                // 分发给子组件的插槽内容
                <div style="margin-top: 30px">多云，最高气温34度，最低气温28度，微风</div>
            </child>
        </div>
    </div>
</template>
<script>
    import child from "./child.vue";
    export default {
        name: 'father',
        components:{
            child
        }
    }
</script>

3、展示效果

image.png

当组件渲染的时候，<slot></slot> 将会被替换为父组件传入的内容。该内容可以包含任何模板代码，包括 HTML，甚至其它的组件。
如果子组件的 template 中没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。
即 如果子组件没有使用插槽，父组件如果需要往子组件中填充模板或者html, 是没法做到的。

三 深入了解插槽使用

<1> 插槽的编译作用域

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

<navigation-link url="/profile">
  Clicking here will send you to: {{ url }}
  <!--
  这里的 `url` 会是 undefined，因为其 (指该插槽的) 内容是
  _传递给_ <navigation-link> 的而不是
  在 <navigation-link> 组件*内部*定义的。
  -->
</navigation-link>

<2> 给插槽的slot位置设置默认值

给插槽设置具体的后备 (也就是默认的) 内容，它只会在没有提供内容的时候被渲染。
例如,
某子组件<submit-button>中的<button> 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在 <slot> 标签内：

<button type="submit">
  <slot>Submit</slot>
</button>

当在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时,后备内容“Submit”将会被渲染
当提供内容：

<submit-button>
  Save
</submit-button>

则这个提供的内容将会被渲染从而取代后备内容：

<button type="submit">
  Save
</button>

<3> v-slot具名插槽与匿名插槽

跟 v-on 和 v-bind 一样，v-slot 也有缩写, 为#，即把(v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header。
该缩写只在其有参数的时候才可用, 如果希望使用缩写的话，必须始终以明确插槽名取而代之。

具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。
vue给<slot> 元素定义有一个特殊的属性：name。这个属性可以用来定义插槽 (即给它取名)。

匿名插槽，又可以叫它单个插槽或者默认插槽。与具名插槽相对，它不需要设置name属性。（它隐藏的name属性为default。）

举例,
定义子组件

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

父组件使用插槽

父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中
即父组件通过在template上写v-slot:name来使用具名插槽

父组件在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

<base-layout>
  // v-slot:header 可以被重写为 #header
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  // 这里可以将template标签去掉,单纯放内容也可以 或者单单去掉v-slot:default
  <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 info</p>
  </template>
</base-layout>

现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

注意 v-slot 只能添加在 <template> 上 (只有一种例外情况 : 被废弃的slot=‘name’)

<4> 作用域插槽 -- 插槽 prop

作用域插槽其实就是可以传递数据的插槽。
它本质上是vue为了将子组件中的数据方便给父组件的插槽内容中使用, 从而给 <slot> 元素设置一个属性。
将该属性绑定上slot中, 从而父组件可访问子组件的数据。
绑定在 <slot> 元素上的 attribute 被称为插槽 prop。

子组件中的一些数据想在父组件中使用，必须通过规定的方法来传递。在官方文档中提出了一条规则，父级模板里的所有内容都是在父级作用域中编译的。子模板里的所有内容都是在子作用域中编译的。如果你在父组件直接使用子组件中的值，是会报错的。

(01)匿名插槽的作用域插槽

为了让 子组件中的数据 在父级的插槽内容中可用，我们可以将 数据 作为 元素的一个特性绑定上去：

语法：v-bind:users="user"

举例,
子组件设置slot, 并绑定数据
为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去：

<template>
  <span>
      <slot v-bind:user="user">
       {{ user.lastName }}
      </slot>
  </span>
</template>

绑定在 <slot> 元素上的 attribute 特性（v-bind:users=“user”）被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

语法：v-slot:default="随意取的名字" // default可省略，简写为v-slot="随意取的名字"

父组件中通过插槽prop属性使用子组件的数据

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。

注意：
父组件中的slotProps可以是随意取的。
子组件中users是随意取的，与之对应的是父组件中的users。
子组件中的user为数据。

(02) 具名插槽的作用域插槽

与匿名插槽同理，只需要把default替换成插槽的name值即可。

举例,
子组件

<template>
    <div class="hello">
     <div class='slotLeft'>
        <slot name='helloWorld' v-bind:users="user"></slot>
     </div> 
   </div>
</template>

父组件

<template>
  <div class="home">
    <HelloWorld>
      <template  v-slot:helloWorld="slotProps">
         <h1>{{slotProps.users.name}}</h1> 
      </template>
    </HelloWorld>
  </div>
</template>

注意：
默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确。

image.png

另，slot-scope写法在2.6之后已废弃，作用与上面相同，在此不做解释。
上面的写法是不是觉得有些麻烦？别着急，我们来看一看解构插槽 Prop。

<5> 解构插槽 Prop

作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：

function (slotProps) {
  // 插槽内容
}

这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop。

语法：v-slot="{ users }"

举例,
子组件

<template>
  <div class="hello">
     <div class='slotLeft'>
       <slot v-bind:users="user"></slot>
     </div> 
  </div>
</template>

父组件

举例1
<template>
  <div class="home">
    <HelloWorld>
      <template  v-slot="{ users }">
         <h1>{{users.name}}</h1> 
      </template>
    </HelloWorld>
  </div>
</template>

举例2
<current-user v-slot="{ user }">
  {{ user.firstName }}
</current-user>

<6> 插槽prop的重命名

这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person：

// 在父组件中
举例1
<current-user v-slot="{ user: person }">
  {{ person.firstName }}
</current-user>

举例2
<template>
  <div class="home">
    <HelloWorld>
      <template  v-slot="{ users:person }">
         <h1>{{person.name}}</h1> 
      </template>
    </HelloWorld>
  </div>
</template>

<7> 插槽prop的后备内容

插槽prop定义后备内容，用于插槽 prop 是 undefined 的情形

<current-user v-slot="{ user = { firstName: 'Guest' } }">
  {{ user.firstName }}
</current-user>

待补充

<8> ### 独占默认插槽的缩写语法

<9> 动态插槽名

参考链接：
https://blog.csdn.net/Oralinge/article/details/103896320
https://blog.csdn.net/bobozai86/article/details/105473445

-- 2021.10.12