vue中的作用域插槽小案例

1、使用场景：数据在组件自身，但是根据数据生成的结构需要组件的使用者来决定。

2、效果展示：（使用的组件是同一组件，数据也一样，但是结构不一样）

3、具体编码： 

App.vue页面的代码

<template>
  <div class="container">
    <Category title="游戏">
      <template scope="dataObj">
        <ul>
          <li v-for="(g,index) in dataObj.games" :key="index">{{g}}</li>
        </ul>
      </template>
    </Category>
    <Category title="游戏">
        <template scope="dataObj">
        <ol>
          <li v-for="(g,index) in dataObj.games" :key="index">{{g}}</li>
        </ol>
      </template>
    </Category>
    <Category title="游戏">
      <template scope="dataObj">
        <h4 v-for="(g,index) in dataObj.games" :key="index">
         {{g}}
        </h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category.vue";
export default {
  name: "App",
  components: {
    Category,
  },
  data() {
    return {};
  },
};
</script>

<style>
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
h4 {
  text-align: center;
}
</style>

子组件Category的代码：

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

<script>
export default {
  name: "Category",
  props: ["title"],
  data(){
      return {
           games: ["红色警戒", "穿越火线", "qq飞车", "超级玛丽"],
      }
  }
};
</script>

<style>
.category {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h3 {
  background-color: orange;
  text-align: center;
}
img {
  width: 100%;
}
video {
  width: 100%;
}
</style>

4、代码细节分析：