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>

原文地址：https://www.cnblogs.com/li9club/p/11522087.html