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>
複製程式碼

頁面顯示