vue插槽

什么是插槽（slot）

插槽允许开发者开发自己的组件时，预留位置给使用组件者传递而来的数据
slot 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

简单使用方法

代码：
父组件

 <div id="app">
 
    <header1>
       <!--header1是用户自己封装的组件 -->
      <!-- 默认情况下 填充内容都会被填充到名字叫default的插槽中 -->
      <!-- 指定内容到某一插槽需要在一个template模板中 -->
      <!-- 需要使用v-slot指定插槽 或者#+插槽名 -->
      <!-- template模板是一个虚拟标签 不会被dom解析 不会被渲染为任何实质性的html元素 -->
      123(这是用户想要对自定义组件输入的内容)
    </header1>
   
  </div>

header1子组件
如果不预留插槽位置

<div>
  
</div>

效果

header1预留插槽位置

 <div>

      <slot></slot>
   
  </div>

效果

当组件渲染的时候 父组件在子组件首位标签的值会渲染到子组件slot标签中，而如果子组件中没有slot标签，父组件传递来的值会被舍弃

具名插槽

当子组件中需要用到的插槽有多个的时候，可以使用具名插槽来区分插槽，也就是给插槽取名字。

使用方法

在子组件的slot元素中附上name属性即可给插槽命名 区分多个插槽

header1子组件

<template>
  <div>

      <slot name='title' msg="这是标题区 "></slot>
  	 <br>
      区分线-------------
      <br>
      <slot name='content' msg="这是内容区"></slot>
  </div>
</template>

父组件

<template>
  <div id="app">
    <header1>
      <!-- 默认情况下 填充内容都会被填充到名字叫default的插槽中 -->
      <!-- 指定内容到某一插槽需要在一个template模板中 -->
      <!--#+插槽名指定插槽 -->
      <!-- template模板是一个虚拟标签 不会被dom解析 不会被渲染为任何实质性的html元素 -->
      <template #title>
       
        标题区的内容
        
      </template>
          <!--v-slot指定插槽 -->
         <template  v-slot:content>
       
        内容区的内容
        
      </template>
    </header1>
    <!-- <footer1></footer1> -->
  </div>
</template>

效果图

作用域插槽

在有的时候需要在父组件中使用子组件才有的数据，这个时候需要用到作用域插槽

使用方法

header1子组件
其中msg属性也可以通过:或者v-bind进行动态绑定vue实例中data的数据

<template>
  <div>

      <slot name='title' msg="这是标题区 "></slot>
      <br>
      区分线-------------
      <br>
      <slot name='content' msg="这是内容区"></slot>
  </div>
</template>

父组件接收msg

<template>
  <div id="app">
    <header1>
      <template #title='scopeData'>
       
        {{scopeData}}
        
      </template>
         <template  v-slot:content='data2'>
       {{data2}}
      </template>
    </header1>
    <!-- <footer1></footer1> -->
  </div>
</template>

效果图

可以看到子组件中插槽的msg属性的属性值通过作用域插槽作为一个对象传递到了父组件上