目录

slot插槽

应用场景：

作用：

分类

一、单个slot（基本用法）

二、多个slot（具名插槽）

三、作用域插槽（子组件向父组件传值）

---

---

slot插槽：父组件的内容放到子组件指定的位置

应用场景：

项目中有很多地方需要调用一个组件，比如弹窗，但是内容又不固定，有个可能弹出是表格，有的可能弹出是照片，这个决定于需要调用这个子组件的父组件，这种情况下就可以在自组建（这个弹窗中）使用slot，占坑，slot的HTML元素和内容，完全取决于使用他的父组件给他传了啥。

作用：

子组件a.vue中slot标签的作用实际上就是占坑，站着位置，等待使用a.vue的父组件 <a>content</a> 时候，content的全部内容（包括文字、html元素）全部替代a.vue中设置<slot></slot>的位置。

分类

一、单个slot（基本用法）

用法：

1、子组件中

//子组件child.vue中内容
<template>
  <div class="share">
    <p>首页</p>  //这里是子组件中固定部分，没用slot
    <slot>非固定部分</slot>  //这里是使用了slot部分，不固定，如果有给他传东西了，就会被替代，不传                        
                              则保留
  </div>
</template>

2、父组件中

首先要把这个子组件注册到父组件中，具体省略，注册完后，子组件就可以当做一个标签使用。

<template>
  <div class="index">
    <child>花花花花花</child>  //child标签之间的内容，不管是HTML元素还是文字都会全部替代 
                                child.vue中 slot标签中的内容
  </div>
</template>

3、结果

二、多个slot（具名插槽）

使用场景：

同一个组件，不同位置需要放置不同内容，比如有题目，文字，图片组合，那就可以设置多个slot，分别占坑，每个slot设置个名字，然后使用时候根据名字找到对应的slot，替换内容。

使用步骤：

1、子组件中定义多个插槽，以name属性区分

<template>
  <div class="share">
    <p>
      标题：<slot name="title"></slot>
    </p>
    <p>
      内容：<slot name="content"></slot>
    </p>
    <p>
      文字：<slot name="text"></slot>
    </p>
     <p>
      默认：<slot></slot>
    </p>
  </div>
</template>

2、父组件中以template标签引入，并使用v-slot(v-slot 缩写为字符 #)绑定相应插槽的name属性作为区分

<template>
  <div class="index">
    <share>
      <template v-slot:title>
        <h1>我是标题</h1>
      </template>
      <template v-slot:content>
        <h1>我是内容</h1>
      </template>
      <template v-slot:text>
        <h1>我是文字</h1>
      </template>
      <template v-slot:default>  //default指向的是不带name属性的slot
        <p>我是默认插槽</p>
      </template>
    </share>
  </div>
</template>

3、结果：

三、作用域插槽（子组件向父组件传值）

使用场景：

以上都是父组件给子组件传值，然后渲染展示的还是子组件的内容。有时候需要子组件中的值给父组件，有些人可能会问，子组件的值给传父组件，然后渲染展示还是子组件，为啥不直接在子组件中展示，原因很简单，同样的值，可能需要渲染不同的表现形式，比如1、2、3；可以展示出li：1、2、3，也可以展示出span：1、2、3，这个展现形式由父组件来控制。

父组件在调用子组件的时候给子组件传了一个插槽，这个插槽为作用域插槽，该插槽必须放在template标签里面，同时声明从子组件接收的数据放在一个自定义属性内，并定义该数据的渲染方式。

加了个template标签，二次处理插槽了，其他的几种插槽都是原来啥样的，原封不动的替换了，这个是可以再整个操作再替换。作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。可以对值进行二次处理，可以让值用于不同的场景，可以从整体中拿出部分。

总的样式：v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射，然后用这个映射直接访问值

使用步骤：

1、子组件中：

<template>
    <div>
        <ul>
            <slot v-for="value in list" :value=value  name="footer">//使用slot占位
            </slot>
        </ul>
    </div>

</template>
<script>
    export default {
        data(){
            return{
                list:{1,2,3,4],
            }
        },
    }
</script>

2、父组件

 <child>
     <template v-slot:footer="message"><!--定义一个插槽，该插槽必须放在template标签内-->
         <li>{{message.value}}</li><--!定义使用渲染方式-->
     </template>
 </child>

 //这个message绑定了子组件所有的值，通过message.就可以获取

 <child>
     <template v-slot:footer="message">
         <h1>{{message.value}}</h1><!--定义不同的渲染方式-->
     </template>
 </child>

3、结果：