今天目標：

1. 我有兩個頁面上面的 nav 大致上功能一樣，只有少部分不同，可以幫我設計一個 nav 做到這件事嗎？

slot

我用自己解釋為：在元件上鑽一個洞，在使用的頁面上可以自由替補上那個洞要補什麼

用 game 來解釋就是，設計一把武器，要鑲嵌什麼寶石是使用者的自由 :P

code 一樣延續昨天的來練習。

navbar.vue

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      
    <!-- 設計為這段 slot 會插在 nav 的右邊（因為 css 設計） -->
    <form class="navbar-form navbar-right">
      <slot name='right'>
        <!-- 包裹在 slot 裡面的這段 code 是預設 -->    
      </slot>
    </form>
      
    </div>
  </div>
</nav>

learnComponent.vue (使用的頁面)

</template>
  <div>
    <navbar>
	
	<!-- 這段 code 將會被插入在上面我們設計的地方（ nav 右邊）  -->
    <div slot="right">
      <div class="form-group">
        <input type="text" placeholder="Email" class="form-control">
      </div>
      <div class="form-group">
        <input type="password" placeholder="Password" class="form-control">
      </div>
      <button type="submit" class="btn btn-success">Sign in</button>
    </div>
  
    </navbar>
    <container :list="list" />
    <jumbotron />
  </div>
</template>

關鍵就在於 div 的 attribute: slot

我們告訴 vue 要將這段 code 插到 navbar 這元件裡面的 slot 名稱為 right 中。

官方範例：

這邊我推薦官方的 Modal 範例： Modal Component

Modal Component sample:

<script type="text/x-template" id="modal-template">
  <transition name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">

          <div class="modal-header">
            <slot name="header">
              default header
            </slot>
          </div>

          <div class="modal-body">
            <slot name="body">
              default body
            </slot>
          </div>

          <div class="modal-footer">
           
           <slot name="footer">
              <!-- 
                  如果 slot 本身有包含內容，將會是預設樣式，
                  也就是說引用頁面如果不需要自己的 footer 將會出現以下樣式 
                  如果崁入自己的 footer 這段將被覆蓋過去。 
              -->
              default footer
              <button class="modal-default-button" @click="$emit('close')">
                OK
              </button>
            </slot>
            
          </div>
        </div>
      </div>
    </div>
  </transition>
</script>

這是一個彈跳視窗、modal 或稱 dialog 官方設計中把：header, body, footer 分別設計好
在使用的頁面就可以彈性的崁入需要的樣式。

如 body 有時候只需要一段文字詢問用者，或者需要 input 讓使用者在輸入一些資料等..。

而 footer 大概是放 OK 或 cancel 偶爾也有需要其他按鈕選項，就可以在自己的頁面中彈性加入。

github 完整範例：

實作小範例入門 Vue & Vuex 2.0 - github 完整範例

使用 git checkout 切換每天範例。