作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。例如，设想一个带有如下模板的
<Category>组件 （子组件）

<template>
    <slot :games="games">我是默认的一些内容</slot>
  </div>
</template>

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

然后我在父组件中拿到子组件的数据进行渲染

<template>
  <div>
    <Category >
      <template scope="xxx">
        <h4 v-for="(item,index) in xxx.games" :key="index">    // 这样就可以拿到子组件的games数据了
          {{item}}
        </h4>
      </template>
    </Category>
  </div>
</template>