vue插槽的使用

什么是插槽？

插槽（slot）是 Vue 提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，且具有模块化的特质和更大的重要性，插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制
用 < slot > 元素将不同的DOM 树组合在一起，slot 是组件内部的占位符，用户可以使用自己的标记来填充

1、默认插槽

插槽内容可以使任意内容

<div id="app">
    <child></child>
  </div>
  <script>
    Vue.component('child',{
      template:`
      <div>
      hello world!
      </div>`
    })
    var vm = new Vue({
      el:'#app',
      data:{}
    })

此时页面显示的是 hello world!
< child >你好< /child > 组件中加上你好，需要在声明的地方加上一个< slot >< /slot >插槽

<div id="app">
    <child>你好</child>
  </div>
  <script>
    Vue.component('child',{
      template:`
      <div>
      hello world!
      <slot></slot>
      </div>`
    })
    var vm = new Vue({
      el:'#app',
      data:{}
    })

这个时候组件中的"你好"才会显示
页面显示内容 hello world! 你好

插槽就是Vue实现的一套内容分发的API，将< slot >< /slot >元素作为承载分发内容的出口
这句话的意思就是，没有插槽的情况下再组件标签内写一些内容是不起任何作用的，当在组件中声明了slot元素后，在组件元素内写的内容才会展示出来

2、具名插槽

具名插槽，就是给这个插槽起个名字
在组件中，给插槽起个名字，一个名字是girl，一个名字是boy，还有一个不起名字
然后再 < child >< /child >内，slot属性对应的内容都会在组件中name一一对应
没有名字的插槽就是默认插槽

<div id="app">
    <child>
      <template slot="girl">
        漂亮、美丽、购物、逛街
      </template>
      <template slot="boy">
        帅气、诚实
      </template>
      <div>
        我是另一类人
        我是默认的插槽
      </div>
    </child>
  </div>
  <script>
    Vue.component('child',{
      template:`
        <div>
        <h4>这个世界不仅有男人和女人</h4>
        <slot name="girl"></slot>
        <div style="height:1px;background-color:red;"></div>
        <slot name="boy"></slot>
        <div style="height:1px;background-color:red;"></div>
        <slot></slot>
      `
    })
    var vm = new Vue({
      el:'#app',
      data:{}
    })
  </script>

页面显示的内容：

3、作用域插槽

我们可以把组件上的属性/值，在组件元素上使用

<div id="app">
    <child>
      <template slot-scope="a">
        <!-- {"say":"你好"} -->
        {{a}}
      </template>
    </child>
  </div>
  <script>
    Vue.component('child',{
      template:`
      <div>
      <slot say="你好"></slot>
      </div>
      `
    })
    let vm = new Vue({
      el:'#app',
      data:{}
    })
  </script>

我们给< slot >< /slot > 元素上定义一个属性 say（随便定义的！），接下来在使用组件child，然后再template元素上添加属性 slot-scope 随便起个名字a
我们把a展示出来发现是 {“say” : “你好”}，也就是slot上面的属性和值组成的键值对，这就是作用域插槽

再看下一例子：

<div id="app">
    <child :lists='nameList'>
      <template slot-scope="a">{{a}}</template>
    </child>
  </div>
  <script>
    Vue.component('child',{
      props:['lists'],
      template:`
      <div>
      <ul>
      <li v-for="list in lists">
      <slot :bbb="list"></slot>
      </li>
      </ul>
      </div>
      `
    })
    let vm = new Vue({
      el:'#app',
      data:{
        nameList:[
          {id:1,name:'孙悟空'},
          {id:2,name:'猪八戒'},
          {id:3,name:'沙和尚'},
          {id:4,name:'唐僧'},
          {id:5,name:'小白龙'},
        ]
      }
    })
  </script>

页面展示的效果：