組件插槽

• 組件的最大特性就是複用性，而用好插槽能大大提升組件的可複用能力

匿名插槽

​
  <div id="app">
     <!-- 插槽內容-->
    <!-- 這裏的全部組件標籤中嵌套的內容會替換掉slot 若是不傳值 則使用 slot 中的默認值 -->  
    <alert-box>有bug發生</alert-box>
    <alert-box>有一個警告</alert-box>
    <alert-box></alert-box>
  </div>
​
  <script type="text/javascript">
    /*
     組件插槽：父組件向子組件傳遞內容
   */
     // 插槽位置
    Vue.component('alert-box', {
      template: `
        <div>
          <strong>ERROR:</strong>
  # 當組件渲染的時候，這個 <slot> 元素將會被替換爲「組件標籤中嵌套的內容」。
  # 插槽內能夠包含任何模板代碼，包括 HTML
          <slot>默認內容</slot>
        </div>
      `
   });
    var vm = new Vue({
      el: '#app',
      data: {
        
     }
   });
  </script>
</body>
</html>
​

具名插槽

• 具備名字的插槽

• 使用 <slot> 中的 "name" 屬性綁定元素

​
  <div id="app">
    <base-layout>
       <!-- 二、 經過slot屬性來指定, 這個slot的值必須和下面slot組件得name值對應上
    若是沒有匹配到 則放到匿名的插槽中   --> 
      <p slot='header'>標題信息</p>
      <p>主要內容1</p>
      <p>主要內容2</p>
      <p slot='footer'>底部信息信息</p>
    </base-layout>
​
    <base-layout>
      <!-- 注意點：template臨時的包裹標籤最終不會渲染到頁面上     -->  
      <template slot='header'>
        <p>標題信息1</p>
        <p>標題信息2</p>
      </template>
      <p>主要內容1</p>
      <p>主要內容2</p>
      <template slot='footer'>
        <p>底部信息信息1</p>
        <p>底部信息信息2</p>
      </template>
    </base-layout>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
     具名插槽
   */
    Vue.component('base-layout', {
      template: `
        <div>
          <header>
   ### 一、 使用 <slot> 中的 "name" 屬性綁定元素 指定當前插槽的名字
            <slot name='header'></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
   ### 注意點： 
   ### 具名插槽的渲染順序，徹底取決於模板，而不是取決於父組件中元素的順序
            <slot name='footer'></slot>
          </footer>
        </div>
      `
   });
    var vm = new Vue({
      el: '#app',
      data: {
        
     }
   });
  </script>
</body>
</html>
​

做用域插槽

• 父組件對子組件加工處理

• 既能夠複用子組件的slot，又可使slot內容不一致

  <div id="app">
    <!-- 
  一、當咱們但願li 的樣式由外部使用組件的地方定義，由於可能有多種地方要使用該組件，
  但樣式但願不同 這個時候咱們須要使用做用域插槽 
  
 -->  
    <fruit-list :list='list'>
       <!-- 二、 父組件中使用了<template>元素,並且包含scope="slotProps",
   slotProps在這裏只是臨時變量   
  --->  
      <template slot-scope='slotProps'>
        <strong v-if='slotProps.info.id==3' class="current">
           {{slotProps.info.name}}          
         </strong>
        <span v-else>{{slotProps.info.name}}</span>
      </template>
    </fruit-list>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
     做用域插槽
     三、 在子組件模板中,<slot>元素上有一個相似props傳遞數據給組件的寫法msg="xxx",
  插槽能夠提供一個默認內容，若是若是父組件沒有爲這個插槽提供了內容，會顯示默認的內容。
  若是父組件爲這個插槽提供了內容，則默認的內容會被替換掉
   */
    Vue.component('fruit-list', {
      props: ['list'],
      template: `
        <div>
          <li :key='item.id' v-for='item in list'>
            <slot :info='item'>{{item.name}}</slot>
          </li>
        </div>
      `
   });
    var vm = new Vue({
      el: '#app',
      data: {
        list: [{
          id: 1,
          name: 'apple'
       },{
          id: 2,
          name: 'orange'
       },{
          id: 3,
          name: 'banana'
       }]
     }
   });
  </script>
</body>
</html>
​