求一键三连

希望大家看完觉得有用的话点赞、关注和收藏，感谢！！！

重点

插槽在组件封装中特别有用，尤其是在组件库项目中，因为之前没有复习插槽，导致很多东西都特别难以实现，卡了很多天。
但是只要使用了插槽，具名插槽，作用域插槽，很多东西都迎刃而解，插槽让组件封装变的更加灵活，也让组件库成为可能。

认识插槽

更加动态的使用组件在这里插入图片描述

slot是占位，让父组件决定使用什么元素。
slot是给有不同需要的时候用的

在这里插入图片描述

插槽的使用

在子组件中间放入需要插入的东西，和子组件插槽的位置是对应上的。
子组件：在template中默认值表示这是一个插槽
父组件:

   <show-message title="哈哈哈">
      <button>我是按钮元素</button>   //此时插槽中放的就是按钮
 </show-message>

在这里插入图片描述
插槽是可以设置默认值的，在slot里面写上内容就是没有传递东西时的默认值

多个插槽（具名插槽 name=''name" #name）

如果不命名直接用，则在调用子组件时放入的html元素全都放在一个插槽内。
（2023.2.4 因为忘记了这个具名插槽，所以效果一直很差，一定要好好复习，别总想往前走！）

在这里插入图片描述
如何使用，在父组件中调用子组件时，在子组件中写<template v-solt:插槽名>具体的东西
子组件： <slot name="left">left</slot> 在插槽上写上name
父组件： 推荐用# 且特别注意只能写在一个template上面

<nav-bar>
<template #left>//这里用#插槽名来表示对应插槽名
  <button>{
   
   {leftcontent}}</button>
</template>
或者
<template v-slot:right>  //v-slot：插槽名
  <a href="#">登录</a>
</template>

在这里插入图片描述
动态插槽（做个了解）

当图片路径较深时怎么办：使用@

@/img/图片.jpg 这样就是先找到img文件夹然后再找图片
在这里插入图片描述

渲染作用域

在这里插入图片描述
简单就是每个组件里面的内容都必须在本组件中定义使用，无法跨组件调用。
在本组件中编写的，那么用到的数据都必须是本组件中的数据
例子：
在刚才具名插槽中，有一个插槽在父组件中是按钮，按钮的内容是{ {leftText}},那么这个模板语法的内容leftText必须是在父组件app.vue中定义好的，也就是它的数据必须在本组件中定义。
虽然它最后展示是在子组件中展示，但是它是在父组件中使用的，所以必须在父组件中定义。
在这里插入图片描述

作用域插槽（插槽传递子组件属性）

我们希望对之前的案例做一个更改，之前案例的子组件中格式都是写死的，都是在子组件中定义好的，比如说都是span，并没有使用插槽，那么我们希望可以使用插槽来进行更改，可以由父组件决定是span或者说按钮等内容。
首先是使用插槽，那么span就变为默认值，如果没有使用插槽则默认为span

		<slot >
          <span>{
    
    {
    
     item }}</span>
        </slot>

那么就有一个问题：子组件中for循环的item如何传递给父组件
(这个真的特别重要，因为不记得作用域插槽的用法，在自己封装组件的时候卡了好几天，基础真的太重要了)
在这里插入图片描述
父组件插槽原来是这样的，这个item我们拿不到

所以我们要解决的就是一个插槽传递信息的问题，在使用的插槽的时候可以把子组件的数据传出来
我们传递给插槽。

子组件的操作：传递属性

在插槽上写：用：绑定一个属性传递出去 :item=“要传递的属性”
这里呢也有一个注意事项，那就是：
在vue中，动态绑定的属性都要加冒号：
而静态属性则不用，比如这里的abc=“cba”,它就是静态的
但是对于item来说它是动态的，所以必须要加冒号：

 <slot :item="item" abc="cba">
          <span>{
    
    {
    
     item }}</span>
        </slot>

父组件操作：接受属性并使用

用template #：插槽名=“接受属性名” 在这里默认使用props命名（可以用其他命名）
这里的props包含了该插槽所有传递出来的属性，包括item和abc
之后就可以在template中使用接受到的数据了props.item

  <template v-slot:name="props">
        <button>{
    
    {
    
     props.item }}</button>
      </template>
//另一种写法
 <template #name="props">
    <button>{
    
    {
    
     props.item }}</button>
  </template>