vue插槽的使用

默认插槽

父组件

// 父组件
<div>
// 调用子组件
<slotOne1>
  <p style="color:red">我默认插槽内容</p>
</slotOne1>
</div>

子组件

Vue.component('soltOnel',{
  template:`
    <div>我是子组件</div>
    // 显示插槽内容
    <slot></slot>
  `
})

一个组件中只能有一个默认插槽。相对应的，具名插槽就可以有很多个，只要名字（name属性）不同就可以了

具名插槽

父组件

// 父组件
<div>
// 调用子组件
<slotOne1>
  <p slot='footer' style="color:red">我是具名插槽内容0</p>
  <p slot='footers' style="color:pink">我是具名插槽内容1</p>
</slotOne1>
</div>

子组件

Vue.component('soltOnel',{
  template:`
    <div>我是子组件</div>
    <slot name="footer"></slot>
    <slot name="footers"></slot>
  `
})

作用域插槽

父组件

<div id="app">
  <slot-three>
    <template slot-scope="scope">
      <div v-for="(item, index) in scope.dataList" v-bind:key="index">
        {{item}}
      </div>
    </template>
  </slot-three> 
</div>

<script>
    var vm new Vue({
      el: '#app',
      data: {

      },
      mounted() {

      }
    })
</script>

子组件

    Vue.component('slot-three', {
      data: function () {
        return {
          user: [
            { name: 'Jack', sex: 'boy' },
            { name: 'Jone', sex: 'girl' },
            { name: 'Tom', sex: 'boy' }
          ]
        }
      },
      template: `
        <div>
          <slot :dataList="this.user"></slot>
        </div>
      `,
      methods: {
      }
    })