作用域插槽

使用方法

1.编写想要的组件模板,并将模板的数据也迁移到模板中.

通过:games:game这个属性将组件的数据(子组件)传递给APP.vue中(父组件)

<template>
  <div id="Category">
    <h3>{{ title }}分类</h3>
    <!-- 通过slot标签传递的数据传给了该插槽的使用者 -->
    <slot :games="games" :msg="msg">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: ["title"],
  // 数据从App组件中迁移到Category组件
  data() {
    return {
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
      msg: 'hello'
    };
  },
};
</script>

<style scoped>
#Category {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h3 {
  background-color: orange;
}
</style>

2.在APP.vue中调用该模板,使用scope或者v-slot属性接收数据

<template>
  <div id="app">
    <Category title="游戏">
      <!-- 要想收到Category组件中插槽传过来的数据，必须使用template标签 -->
      <!-- scope属性的属性值任意，会接收所有来自插槽的数据封装为一个对象 -->
      <!-- 
        传递的数据(对象)：
        data：{
           "games": [ "红色警戒", "穿越火线", "劲舞团", "超级玛丽" ],
           "msg": 'hello'
        }
       -->
      <template scope="data">
        <ul>
          <li v-for="(game, index) in data.games" :key="index">{{ game }}</li>
        </ul>
      </template>
    </Category>

    <Category title="游戏">
      <!-- 此处的scope还可以写成slot-scope，作用相同，只不过这个是新的API写法 -->
      <template slot-scope="data">
        <ol>
          <li v-for="(game, index) in data.games" :key="index">{{ game }}</li>
        </ol>
        <!--  -->
        <h4>{{ data.msg }}</h4>
      </template>
    </Category>

    <Category title="游戏">
      <!-- 此处支持ES6中的解构赋值 -->
      <template slot-scope="{ games }">
        <h4 v-for="(game, index) in games" :key="index">{{ game }}</h4>
      </template>
    </Category>
  </div>
</template>

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

<style scoped>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

  display: flex;
  justify-content: space-around;
}
</style>