插槽作用

讓父組件可以向子組件指定位置插入Html結(jié)構(gòu)，也是一種組件間通信方式，適用于父組件===>子組件

插槽分類

默認(rèn)插槽、具名插槽，作用域插槽

使用方式

默認(rèn)插槽

子組件Category

<template>
  <div>
    <slot>默認(rèn)內(nèi)容</slot>
  </div>
</template>

父組件

<template>
  <Category>
    <div>插入的html結(jié)構(gòu)</div>
  </Category>
</template>

具名插槽

子組件Category

<template>
  <div>
    <slot name="center">默認(rèn)內(nèi)容</slot>
    <slot name="footer">默認(rèn)內(nèi)容</slot>
  </div>
</template>

父組件

<template>
  <Category>
    //方式一
    <div slot="center">插入的html結(jié)構(gòu)</div>
    //方式二
    <template v-slot:footer>
      <div>插入的html結(jié)構(gòu)</div>
    </template>
  </Category>
</template>

作用域插槽

子組件Category

<template>
  <div>
    <slot :games="games">默認(rèn)內(nèi)容</slot>
  </div>
</template>
<script>
export default {
  name: 'School',
  data () {
    return {
      games: ['AAA', 'BBB' , 'CCC']
    }
  }
}
<script>

父組件

<template>
  <Category>
    <template solt-scope="scope">
      <div v-for="(item,index) in scope.games" :key="index">{{item}}</div>
    </template>
  </Category>
</template>