vue slot 用法

背景：vue 项目中 经常会遇到好几个页面 公用一个组件 但是针对某一个地方可能显示的内容不一样，这个时候我们难道要再写一个组件吗？当然不！这个时候我们就用到了 slot 插槽！

简言之，把你需要的内容 插到相应的位置...

下面介绍它的用法：

1.单个插槽

父组件

<navbar>
 <div class="">
    slot content
 </div>
</navbar>
复制代码

子组件

<template>
  <div class="">
    <slot>123</slot>
  </div>
</template>
复制代码

这个时候 页面就会显示 slot content

如果父组件里没有添加内容，就会显示 123

2.命名插槽

父组件

<navbar>
        <div slot="one">
          <button type="button" name="button">454</button>
        </div>
        <div slot="two">
          slot two
        </div>
      </navbar>
复制代码

子组件

<template>
  <div class="">
    <slot name="one">one</slot>
    <slot name="two">two</slot>
    <slot>two2</slot>
  </div>
</template>
复制代码

页面显示