插槽(具名插槽和作用域插槽)

具名插槽:

//子组件

<template>
  <div>
    <div>
       //留出父组件插入进来的坑
      <slot name="header"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Child',
}
</script>

<style scoped>

</style>

//父组件

<template>
  <div class="box">
    <Child >
      <template #header>   //非缩写形式 <template v-slot:header>
        <h2>aaaaaaa</h2>
      </template>
    </Child>
   <div />
<template />

作用域插槽

//子组件


<template>
  <div class="box">
    <ul>
      <li v-for="(item, index) in data" :key="index">
        <slot :row="item" :$index="index"></slot>  //slot标签的所有属性都会自动传递给父组件
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'List',
  props: {
    data: Array  //父组件传递过来
  }
}
</script>

//父组件


<template>
    <List :data="todos">
      <!-- 
        scope: 包含子组件中slot标签中的所有属性数据
        {
          row: todo对象,
          $index: 对应的下标
        }
       -->
      <template v-slot="scope">
        <span >{{scope.row.text}}</span>
      </template>
    </List>
<template />


    data () {
      return {
        todos: [
          {id: 1, text: 'AAA', isComplete: false},
          {id: 2, text: 'BBB', isComplete: true},
          {id: 3, text: 'CCC', isComplete: false},
          {id: 4, text: 'DDD', isComplete: false},
        ]
      }
    },