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>
复制代码

页面显示