大白话vue——slot的做用与使用

这篇内容原本是不打算放在首页上的，由于内容实在是比较简单，可是在查找slot的使用讲解时发现相关的讲解比较少，要么像官方文档同样简单讲解（看过任然一脸懵逼），也许是本身理解能力比较差...因此在此讲述记录吧

言归正传，且看正文讲解

在看官网对slot的解释中，出现次数最多的是“插槽”，若是想象成物体，也就是说slot是一个能够插入的槽口，好比插座的插孔。那么slot的做用是什么呢？

先来看下面的例子

//slot组件
<template>
  <div class="slots">
      slot的用法
      <SlotChild>
          <div class="no-name">我是嵌在子组件内不具备属性名的标签</div>
      </SlotChild>
  </div>
</template>

<script>
import SlotChild from 'component/slotChild'
export default {
    name: 'slots',
    components:{
        SlotChild
    },
    data () {
        return {
      
        }
    }
}
</script>

//slot的子组件
<template>
  <div class="slot-child">
      我是slot的子组件
  </div>
</template>

<script>
export default {
  name: 'slotChild',
  data () {
    return {
      
    }
  }
}
</script>

页面渲染效果

经过上面的内容能够知道，在slot组件中引入了slot的子组件，并且又在子组件标签内添加了新的标签内容，但页面上并无将子组件标签内的标签内容显示出来，

因此说在不适用slot的状况下，在子组件标签内添加Dom是无效的

如今来修改slot的子组件

<template>
  <div class="slot-child">
　　　//在子组件中添加slot标签
      <slot></slot>
      我是slot的子组件
  </div>
</template>

<script>
export default {
  name: 'slotChild',
  data () {
    return {
      
    }
  }
}
</script>

页面效果图

因而可知，使用slot后能够在子组件内显示插入的新标签

这里只是讲述了slot的简单用法，slot的具名并无讲到，并不难尝试着写写就能够，关键是要动手敲，光看是无法深入理解的