Vue中的slot（占坑，预留位置）

Vue中的slot（占坑，预留位置）

1. 子模板不使用slot
2. 子模板使用slot
3. 子模板使用使用name属性，且传递data

• 文件名：Slots.vue

//slot组件

<template>

  <div class="Slots">

      <div class="myd">

      在子组件中不使用slot时SlotChildwithnoslots下的内容不会显示

      <SlotChildwithnoslots>         

          <div class="no-name">111111111111111111我是嵌在子组件内不具有属性名的标签</div>

          <div >2222222222222222222222222222我是嵌在子组件内不具有属性名的标签</div>

      </SlotChildwithnoslots>

    </div>

      '

      '

      '

      '

      '

      '

      '

      <div class="myd">'

      在子组件中使用slot时SlotChildwithslots下的内容会显示

       <SlotChildwithslots>         

          <div class="no-name">111111111111111111我是嵌在子组件内不具有属性名的标签</div>

          <div >2222222222222222222222222222我是嵌在子组件内不具有属性名的标签</div>

      </SlotChildwithslots>

      </div>  

        '

      '

      '

      '

      '

      '

      '.

       <div class="myd">'

      在子组件中使用slot时且包含数据时下的内容会显示

       <SlotChildwithslotsanddata>         

          <div slot="header">111111111111111111我是嵌在子组件内不具有属性名的标签</div>

          <div slot="header">2222222222222222222222222222我是嵌在子组件内不具有属性名的标签</div>

          <template slot-scope="user">

                <div v-for="item in user.data" :key="item.id">

                {{item}}

                </div>

            </template>

      </SlotChildwithslotsanddata>

      </div>  

  </div>

</template>

<script>

import SlotChildwithnoslots from '@/components/SlotChildwithnoslots'

import SlotChildwithslots from '@/components/SlotChildwithslots'

import SlotChildwithslotsanddata from '@/components/SlotChildwithslotsanddata'

export default {

    name: 'Slots',

    components:{

        SlotChildwithnoslots,

        SlotChildwithslots,

        SlotChildwithslotsanddata

    },

    data () {

        return {

        }

    }

}

</script>

<style>

.myd

{ 

background-color:yellow;

height: 300px;

border:1px solid red;

}

</style>

• 文件名：SlotChildwithslots.vue

//slot的子组件
<template>
  <div class="SlotChildwithslots">
      <slot></slot>
      我是slot的子组件
  </div>
</template>

<script>
export default {
  name: 'SlotChildwithslots',
  data () {
    return {

    }
  }
}
</script>

• 文件名：SlotChildwithnoslots.vue

//slot的子组件
<template>
  <div class="SlotChildwithnoslots">
      我是slot的子组件
  </div>
</template>

<script>
export default {
  name: 'SlotChildwithnoslots',
  data () {
    return {

    }
  }
}
</script>

• 文件名：SlotChildwithslotsanddata.vue

//slot的子组件
<template>
  <div class="SlotChildwithslotsanddata">
      <slot name="header" ></slot>

      我是slot的子组件
       <slot :data="user"></slot>
  </div>
</template>

<script>
export default {
  name: 'SlotChildwithslotsanddata',
  data () {
    return {
      user: [
        {name: 'Jack', sex: 'boy'},
        {name: 'Jone', sex: 'girl'},
        {name: 'Tom', sex: 'boy'}
      ]
    }
  }
}
</script>