14-vue 插槽 slot

1. 作用

让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于父组件向子组件通信。

2. 分类

• 默认插槽
• 具名插槽
• 作用域插槽

3. 使用方式

1.默认插槽

//父组件
<Category>
  <div>html结构</div>
</Category>

//子组件
<template>
  <div>
    <!--定义插槽-->
    <slot>插槽默认的内容</slot>
  </div>
</template>

2. 具名插槽：也就是给插槽起名字

//父组件
<Category>
  <template slot="center">
    <div>html结构</div>
  </template>
  <template slot="footer">
    <div>html结构</div>
  </template>
</Category>

//子组件
<template>
  <div>
    <!--定义插槽-->
    <slot name="center">插槽默认的内容</slot>
    <slot name="footer">插槽默认的内容</slot>
  </div>
</template>

3. 作用域插槽

• 理解：数据在定义插槽的组件里，但是根据数据生成的结构需要组件的使用者决定。（比如：games 数据在 Category组件中，但是使用数据所遍历出来的结构由 App 组件中决定。）
• 具体编码示例

父组件：App.vue
//父组件
<Category>
  <template scope="scopeData">
    //生成ul列表
    <ul>
      <li v-for="g in scopeData.games" :key="g">{{g}}</li>
    </ul>
  </template>
</Category>

<Category>
  <template slot-scope="scopeData">
    //生成h4标题
    <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
  </template>
</Category>


子组件：Category.vue
<template>
  <div>
    <slot :games="games"></slot>
  <div>
</template>

<script>
  export default{
    name:"Category",
    props:["title"],
    //数据在子组件
    data(){
      return {
        games:["游戏a","游戏b","游戏c"]
      }
    }
  }
</script>