[JavaScript知识库]Vue中插槽的基本使用

插槽

插槽就是子组件提供给父组件使用的一个占位符，用标签<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

作用：能够提升封装组件的灵活性，主要应用于组件封装

vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽,方便使用的时候插入所需要的结构

1. 匿名插槽

通过slot标签可以添加匿名插槽

组件内用<slot></slot>占位

没有为插槽指定name名称

在使用组件的时候，组件中的内容会填充到所有匿名插槽的位置，所以以后封装组件的时候，匿名插槽一般只有一个

匿名插槽可以设置默认的内容，如果没有传入内容就使用默认内容，如果传入了，就会进行覆盖

<slot>夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用<slot>夹着的内容在原地显示

<div class="container"
 ? ? v-show="isShow">
 ? ?<!-- 添加匿名插槽 -->
   <!-- aa即为默认内容-->
 ? ?<slot>aa</slot>
</div>

2. 具名插槽

为slot设置name的插槽就称为具名插槽

一个封装组件中可以有多个具名插槽

使用：通过template标签指定内容所放置的插槽名称

v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)

定义具名插槽

<div class="header">
 ? ?<div class="left">
 ? ? ? ?<slot name="left"></slot>
 ? ?</div>
 ? ?<div class="center">{{title}}</div>
 ? ?<div class="right">
 ? ? ? ?<slot name='right'></slot>
 ? ?</div>
</div>

使用具名插槽

<div>
 ? ?<Header>
 ? ? ? ?<template v-slot:left>
 ? ? ? ? ? ?<span class="iconfont icon-home">返回</span>
 ? ? ? ?</template>
 ? ? ? ?<template #right>
 ? ? ? ? ? ?<span class="iconfont icon-sousuo"></span>
 ? ? ? ?</template>
 ? ?</Header>
</div>

3. 作用域插槽

在封装组件的过程中，可以为预留的 <slot> 插槽绑定 props 数据(除了name)，这种带有 props 数据的 <slot> 叫做“作用域插槽"

<template>
  <div>
    <h1>作用域插槽</h1>
    <!-- 
    作用域插槽需要设置name属性
    在子组件中通过v-bind的方式设置属性
    1.如果是固定值，就直接写
    2.如果是变量，就v-bind 
    
    myname是你定义的key的名称，这个名称后期与接收数据时的名称一致
    username:当前封装组件中的数据变量-->
    <slot name='ok'
          :myname='username'
          age='20'
          :hobby='hobby'>我要传递用户名给父组件</slot>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      username: 'jack',
      hobby: ['写代码', '调bug']
    }
  },
}
</script>
<style lang='less' scoped>
</style>

使用作用域插槽：在使用包含作用域插槽的组件时，可以使用 v-slot: 插槽名称 的形式，接收作用域插槽对外提供的数据(v-slot: 可以简化成# )

<template>
  <div>
    <dataSlot>
      <!-- 传递过来的数据是一个对象，所以可以解构的方式获取数据 -->
      <!-- <template v-slot:ok='obj'> {myname:'jack'...}-->
      <template v-slot:ok='{myname,hobby}'>
        <p>{{myname+"---"+hobby}}</p>
        <p>{{myname}}</p>
        <p v-for='(v,i) in hobby'
           :key='i'>{{v}}</p>
      </template>
    </dataSlot>
  </div>
</template>
<script>
import dataSlot from './components/slot/dataSlot'
export default {
  name: '',
  components: {
    dataSlot
  },
  data () {
    return {
    }
  }
}
</script>
<style lang='less' scoped>
</style>