Vue插槽＜slot＞的理解与使用

插槽简单理解：一个坑一个萝卜，（坑）插槽准备好，坐等（萝卜）html结构放进去。

??默认插槽

使用方式：在父组件中，在组件标签内添加html结构；在子组件中，在需要放置这个html结构的位置定义插槽。一个slot里面是可以放入多个html标签结构的。

代码示例：

//第一种情况，父组件内子组件标签没有html结构的情况
//子组件代码
<template>
  <div class="category">
      <h3>{
  {title}}推荐</h3>
      <!-- 定义插槽 -->
      <slot>此处如果没有html结构，默认展示此文字</slot>
  </div>
</template>

//父组件代码
<template>
  <div class="container">   
    <Category title="美食"></Category>
  </div>
</template>



//第二种情况，父组件内子组件标签有html结构的情况
//子组件代码
<template>
  <div class="category">
      <h3>{
  {title}}推荐</h3>
      <!-- 定义插槽 -->
      <slot>此处如果没有html结构，默认展示此文字</slot>
  </div>
<