插槽的作用(作用域插槽)

作用：让父组件可以向子组件指定位置插入html结构 也是一种组件间通信的方式 适用于 父组件传子组件
2.分类:默认插槽 具名插槽 作用域插槽
3.使用方式:

  (1)默认插槽:
    父组件中:<子组件名称><div>结构1</div>
    子组件中:<template><div><slot>插槽内容</slot></div>
 (2)具名插槽
    父组件中:<子组件名称>
    <template slot="center"><div>结构1</div>
    <div>结构1</div>
    子组件中:<template><div><slot name="center">插槽内容</slot></div>
    (3)作用域插槽:
 1.理解:数据在组件的自身 但根据数据生成的结构需要组件的使用者来决定(games数据在子组件中,但使用数据所遍历出来的结构由App组件决定)
 2.具体:
  父组件中:
  <子组件名称><template scope="jkjj"><div><slot>插槽内容</slot></div>
   <ul>
          <li v-for="(g, index) jkjj" :key="index">{{ g }}</li>
        </ul>
  </template>
    

在父组件App中

<template>
  <div class="container">
    <Category title="游戏">
      <template scope="atguigu">
        <!-- scope="x"x可自定义 App组件作为组件的使用者 数据是放在插槽定义的组件里面的 生成的结构是在使用者组件里面的-->
        <!-- {{atguigu.jkjj}} -->
        <ul>
          <li v-for="(g, index) in atguigu.jkjj" :key="index">{{ g }}</li>
        </ul>
      </template>
    </Category>
    <Category title="游戏">
      <template scope="{jkjj}">
        <ol>
          <li style="color:red" v-for="(g, index) in jkjj" :key="index">{{ g }}</li>
        </ol>
      </template>
    </Category>
    <Category title="游戏">
      <template scope="{jkjj}">
          <h4 v-for="(g, index) in jkjj" :key="index">{{ g }}</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category";
export default {
  name: "App",
  methods: {},
  components: {
    Category,
  },
};
</script>

<style  scoped >
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
video {
  width: 100%;
}
</style>

在子组件中

<template>
  <div class="category">
      <h3>{{title}}分类</h3>
   <slot :jkjj="games">我是默认的一些内容</slot>
  </div>
</template>

<script>
export default {
    name:'Category',
    props:['title'],
  data(){
    return{
      games:['红色警戒','穿越火线','劲舞团','超级玛丽',],
    }
  },
  components: {

  }
}
</script>

<style scoped>
.category{
    background-color: skyblue;
    width: 200px;
    height: auto;
}
</style>