vue（slot）插槽

插槽的关键字slot，默认情况下，组件中的模板会覆盖组件中的原始内容（即自定义标签对内部的内容会不显示），解决办法就是使用插槽。

组件的原始内容： 即在vue实例范围之内，因此可以调用实例的data和methods

插槽共分为3中：

插槽的结构：

匿名插槽：

具名插槽：

作用域插槽:

1. 匿名插槽

匿名插槽的作用： 保留组件中的所有原始标签内容，这种插槽被称为匿名插槽

直接在组件中写上slot标签对，就可以在根元素中的引用的组件中间显示所写的内容

//子组件child
vue.component('child',{
template:'<div>
            <p>hello</p>
            <slot>**（可在此定义默认内容）**</slot>
         </div>'
    })
 
//父组件
<div>
    <child>
        <p>world</p>//插入slot的内容
    </child>
</div>
 

 

2. 具名插槽

凡是具有name属性的slot标签，就被称为具名插槽即(在子组件中写，写的位置不同，在引用该模板的页面中显示的位置也会不一样)。
作用：

1. 在组件的原始内容的某个标签中，添加slot=top属性，指明该标签所对应的插槽的名称

2. 在组件模板中通过调用slot标签，兵设置name=top属性，会自动将对应的标签内容添加至当前slot标签所在的位置

注意：原始内容凡是具有slot属性的标签，内容只能添加至组件模板中具有相同值的name属性的slot标签中

匿名插槽的作用： 保留了原始数据，除了具名插槽标签中的内容，即凡是标签中具有slot=top的属性标签
 

//父组件
<body-container>
  <div slot='header'>
    <!-- 我们希望把页头放这里 -->
  </div>
  <div slot='footer'> 
    <!-- 我们希望把页脚放这里 -->
  </div>
</body-container>
 
//子组件
<div>
    <slot name='header'></slot>
    <div>context</div>
    <slot name='footer'></slot>
</div>

3. 作用域插槽

在组件的原始内容中，通过slot-scope属性接受作用域插槽传递的值，即obj={title：‘标题’，num：19}

作用域插槽:将组件模板中的数据传递给组件的原始内容

1. 在slot开始标签中，添加要传递的数据，避开name属性（具名插槽）

2. 在原始内容中通过slot-scope属性（其值是自定义的）接受传递的数据，即slot-scope=varName(本质是个对象，存储传递的数据，即数据会自动转换成键值对，存储在这个对象里，所以属性名对应属性名，属性值对应属性值）
 

//子组件
<div class="box" v-for="item of list" :key="item.id">
      <div class="box-title">
        <p>
          <span>{{item.deNo}}</span>
          <!--我们为每个item准备了一个插槽，将item对象作为一个插槽的prop传入-->
            <slot class="genre" v-bind:item="item"></slot>
        </p>
        <p>{{item.deDate}}</p>
      </div>
    </div>
//父组件
<div>
    <!--1.作用域插槽必须是template开头和结尾的内容-->
    <!--2.slot-scope="props"声明从子组件传递的数据都放在props里-->
    <!--3.加上v-if="props.item!=undefined"判断，防止取不到item的属性-->
    <template slot-scope="props" v-if="props.item!=undefined">
        <!--告诉子组件模板的信息是以<span>标签的形式-->
                <span class="genre">{{props.item.state}}</span>
    </template>
</div>