Vue中的slot

什麼是插槽？

插槽就是在你子組件的模板裏能夠開闢一個或多個槽，讓其餘一些內容能夠插入進來，稱之爲插槽。

爲何要使用插槽？

new Vue({
  el:"#app",
  template:`<div>
               <child>我想讓這一行字顯示出來</child>
            </div>`,
  components:{
    child:{
      template:`<h1>子組件</h1>`
    }
  }
})

咱們想在上面的<child></child>標籤裏面寫了一句話，可是發現頁面上沒有顯示出來。
若是你想讓他顯示出來呢？這時候咱們就須要用到插槽了。

插槽分爲4點：

1 . 插槽能夠插入哪些內容
2 . 匿名插槽
3 . 具名插槽
4 . 做用域插槽

1、插槽能夠插入哪些內容

能夠是不一樣種類的節點

new Vue({
  el:"#app",
  template:`<div>
               <child>我是一個</child>
            </div>`,
  components:{
    child:{
      template:`<h1><slot></slot>子組件</h1>`
    }
  }
})

也能夠是一個或多個組件

Vue.component('global1',{
  template:`<div>我是一個</div>`
})
Vue.component('global2',{
  template:`<div>沒用的</div>`
})

new Vue({
  el:"#app",
  template:`<div>
               <child>
                  <global1></global1>
                  <global2></global2>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1><slot></slot>子組件</h1>`
    }
  }
})

2、匿名插槽

上面的實例中就是匿名插槽 ，也就是這種形式 <slot></slot>

3、具名插槽（分爲vue2.6.0版本前和vue2.6.0版本後）兩個版本

-----------------#####2.6.0前版本-----------------

第一種寫法

new Vue({
  el:"#app",
  template:`<div>
               <child>
                  <template slot="header">
                     <h1>2.6.0版本前具名插槽的第一種寫法</h1>
                  </template>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1>
                  <slot name='header'></slot>子組件
                </h1>`
    }
  }
})

第二種寫法

new Vue({
  el:"#app",
  template:`<div>
               <child>
                    <h1 slot="header">2.6.0版本前具名插槽的第二種寫法</h1>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1>
                  <slot name='header'></slot>子組件
                </h1>`
    }
  }
})

-----------------#####2.6.0後版本-----------------

第一種寫法

new Vue({
  el:"#app",
  template:`<div>
               <child>
                  <template v-slot:header>
                      <h1>2.6.0版本後具名插槽的第一種寫法</h1>
                  </template>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1>
                  <slot name="header"></slot>子組件
                </h1>`
    }
  }
})

第二種寫法

new Vue({
  el:"#app",
  template:`<div>
               <child>
                  <template #header>
                      <h1>2.6.0版本先後具名插槽的第二種寫法</h1>
                  </template>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1>
                  <slot name="header"></slot>子組件
                </h1>`
    }
  }
})

4、做用域插槽（分爲vue2.6.0版本前和vue2.6.0版本後）兩個版本

-----------------#####2.6.0前版本-----------------

new Vue({
  el:"#app",
  template:`<div>
               <child>
                      <template slot-scope="item">
                          {{item.myUser}}
                       </template>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1>
                  <slot :myUser="slotProps"></slot>子組件
                </h1>`,
      data(){
        return {
          slotProps:'2.6.0版本前做用域插槽'
        }
      }
    }
  }
})

-----------------#####2.6.0後版本-----------------

沒有名字的做用域插槽

new Vue({
  el:"#app",
  template:`<div>
               <child>
                      <template v-slot="item">
                          {{item.myUser}}
                       </template>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1>
                  <slot :myUser="slotProps"></slot>子組件
                </h1>`,
      data(){
        return {
          slotProps:'2.6.0版本後沒有名字的做用域插槽'
        }
      }
    }
  }
})

有名字的做用域插槽

new Vue({
  el:"#app",
  template:`<div>
               <child>
                      <template v-slot:header="item">
                          {{item.myUser}}
                       </template>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1>
                  <slot name="header" :myUser="slotProps"></slot>子組件
                </h1>`,
      data(){
        return {
          slotProps:'2.6.0版本後有名字的做用域插槽'
        }
      }
    }
  }
})

一些做用域插槽的寫法

new Vue({
  el:"#app",
  template:`<div>
               <child>
                      //匿名做用域插槽（1）
                      <template v-slot="item">
                          {{item.myUser}}
                       </template>
                       //具名做用域插槽（2）
                       <template v-slot:header="item">
                          {{item.myUser}}
                       </template>
                       //簡寫具名做用域插槽（3）
                       <template #footer="item">
                          {{item.myUser}}
                       </template>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1>
                   //匿名做用域插槽（1）
                  <slot :myUser="slotProps"></slot>子組件
                  //具名做用域插槽（2）
                  <slot :myUser="slotProps" name="header"></slot>子組件
                  //簡寫具名做用域插槽（3）
                  <slot :myUser="slotProps" name="footer"></slot>子組件
                </h1>`,
      data(){
        return {
          slotProps:'2.6.0版本後有名字的做用域插槽'
        }
      }
    }
  }
})