插槽

插槽相當於佔位符，用<slot></slot>表示；用於父元件填充子元件的資訊；

1、 插槽的基本使用

• 先定義一個子元件<navigation-link>，內包含佔位符<slot>

  <a v-bind:href=“url”
    class=“nav-link”>
    <slot></slot>
  </a>
  

• 定義父元件html

  <navigation-link url="/profile">
    Your Profile
  </navigation-link>
  

• 當元件渲染的時候，父元件標籤內的模板內容會替換子元件<slot></slot> ， 即“Your Profile”會渲染到<slot></slot>的位置

  <navigation-link url="/profile">
    <!-- 新增一個 Font Awesome 圖示 -->
    <span class="fa fa-user"></span>
    Your Profile   
  </navigation-link>
  

2、 具名插槽

• 給slot繫結一個name屬性

  <header>
      <slot name=“header”></slot>
    </header
  

• 使用v-slot:[name] , 也可以簡寫為#header

  <template v-slot:header>
      <h1>Here might be a page title</h1>
    </template>
  

• 非具名插槽的寫法：

  <!-- 這樣會觸發一個警告 -->
  <current-user #="{ user }">
    {{ user.firstName }}
  </current-user>
  <!-- 正確寫法：非具名插槽會視為預設插槽 -->
  <current-user #default="{ user }">
    {{ user.firstName }}
  </current-user>
  

3、 後備內容

在<slot></slot>中間填充內容，則擋傳入的slot中不存在時，則會使用使用填好的內容。

<button type="submit">
  <slot>Submit</slot>
</button>

4、 作用域插槽

父級元件模板不能編譯子元件的變數

• 定義一個子元件插槽<current-user> 使用屬性繫結需要訪問的值

  <span>
    <slot v-bind:user="user">
      {{ user.lastName }}
    </slot>
  </span
  

• 繫結在 <slot> 元素上的 attribute 被稱為插槽 prop。現在在父級作用域中，我們可以使用帶值的 v-slot 來定義我們提供的插槽 prop 的名字：

  <current-user>
    <template v-slot:default="slotProps">  //slotProps為自定義的
      {{ slotProps.user.firstName }}   
    </template>
  </current-user>
  

5、 總結

插槽有點類似於父子元件傳值，但傳的不是值，而是傳進去複用的模板；實際業務場景中使用插槽可能並不多，可能用在UI元件的封裝會相對比較靈活；還有就是用在模板部分重複的情況，比如彈框展示不同的內容，或者是多個模板類似但又不相同的元件。