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>
複製代碼

頁面顯示