vue中的插槽————slot

转载链接：https://www.cnblogs.com/loveyt/p/9946450.html

什么是插槽？

**插槽（Slot）**是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。
插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

默认插槽

父组件
在父组件引用的子组件中写入想要显示的内容（可以使用标签，也可以不用）

<template>
  <div>
    我是父组件
    <slotOne1>
      <p style="color:red">我是父组件插槽内容</p>
    </slotOne1>
  </div>
</template>

子组件(slotOne1)
在子组件中写入slot，slot所在的位置就是父组件要显示的内容

<template>
  <div class="slotOne1">
    <div>我是slotOne1组件</div>
    <slot></slot>
  </div>
</template>

效果：