vue 插槽的使用（父组件===＞子组件）

vue 插槽的使用（父组件===>子组件），重新学了一下插槽，在此记录一下
共有3种方式：
第一种：默认插槽
父组件---------------------------------------------

<template>
  <div id="app">
    <Category tittle="美食">
      <img src="../public/aa.png" style="width: 200px;" />
    </Category>
  </div>
</template>

子组件----------------------------------------------------

<template>
  <div>
    <div>{{tittle}}</div>
    <slot></slot>
  </div>
</template>

第二种：具名插槽
父组件---------------------------------------

<template>
  <div id="app">
    <Category tittle="美食">
      <img  slot="center" src="../public/aa.png" style="width: 200px;" />
      <a slot="footer" href="http:www.baidu.com">美食广场</a>
    </Category>
  </div>
</template>

子组件---------------------------------------

<template>
  <div>
    <div>{{tittle}}</div>
    <slot name="center"></slot>
    <slot name="footer"></slot>
  </div>
</template>

第三种：作用域插槽（父组件要的数据在子组件，这个时候可以通过作用域插槽）

父组件------------------------- 用scope接收子组件传来的值，默认的是个对象，注意（要有scope的名称点对象名称才能拿到）

<template>
  <div id="app">
    <Category tittle="美食">
      <template scope="games">
        <ol v-for="(item,index) in games.games" :key="index">
          <li>{{item}}</li>
        </ol>
        <h4>{{games.hello}}</h4>
      </template>
    </Category>
  </div>
</template>

子组件------------------------------

<template>
  <div>
    <div>{{tittle}}</div>
    <slot :games="games" msg="hello"></slot>
  </div>
</template>
<script>
  export default {
    name: 'Category',
    props: ["tittle"],
    data () {
      return {
        games: ["a", "b", "c"]
      }
    },
  }
</script>