vue中的三种插槽类型

插槽的作用：

让父组件可以向子组件指定位置插入html结构，也是组件间通讯的一种方式，适用于父组件==>子组件；

一、默认插槽

使用方法：

①、在父组件中，将子组件标签写成双节点形式，在中间写上要传入的标签内容；

②、在子组件中，使用<slot></slot>标签进行占位，等待使用者在父组件的子组件标签中编写代码，编写的代码内容就会填充到slot标签所处的位置；

子组件（Category.vue）代码：

<template>
  <div class="category">
    <h3>{
  {title}}分类</h3>
    <!-- 定义一个默认插槽，等待使用者编写标签进行填充 -->
    <slot>如果没有设置插入的标签，我就会出现</slot>
  </div>
</template>

父组件（App.vue）代码：

<template>
    <div class=