笔记

本节想实现的效果:

数据放在 子组件 中，数据的结构是由 使用者(父组件) 来定。

本节讲的 作用域 的意思:
子组件Category.vue的使用者App.vue, 如何得到原本放在 子组件Category.vue里面的数据games[] 。

本节最终的效果:

1. 数据在子组件Category.vue;
2. 数据在子组件Category.vue生成的结构由使用者App.vue来决定;

先看看 使用者父组件 通过scop可以看到的效果

父组件使用插槽的源码:

总结

插槽

1. 作用
   让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

2. 分类
   默认插槽、具名插槽、作用域插槽

3. 使用方式：
   3.1 默认插槽：

父组件中：
    <Category>
        <div>html结构1</div>
    </Category>
子组件中：
    <template>
        <div>
            <!-- 定义插槽 -->
            <slot>插槽默认内容...</slot>
        </div>
    </template>

3.2 具名插槽：

  ```vue
  父组件中：
          <Category>
              <template slot="center">
                <div>html结构1</div>
              </template>

              <template v-slot:footer>
                 <div>html结构2</div>
              </template>
          </Category>
  子组件中：
          <template>
              <div>
                 <!-- 定义插槽 -->
                 <slot name="center">插槽默认内容...</slot>
                 <slot name="footer">插槽默认内容...</slot>
              </div>
          </template>
  ```

3.3 作用域插槽：

  1. 理解：<span style="color:red">数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。</span>（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

  2. 具体编码：

     ```vue
     父组件中：
             <Category>
                 <template scope="scopeData">
                     <!-- 生成的是ul列表 -->
                     <ul>
                         <li v-for="g in scopeData.games" :key="g">{{g}}</li>
                     </ul>
                 </template>
             </Category>

             <Category>
                 <template slot-scope="scopeData">
                     <!-- 生成的是h4标题 -->
                     <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
                 </template>
             </Category>
     子组件中：
             <template>
                 <div>
                     <slot :games="games"></slot>
                 </div>
             </template>

             <script>
                 export default {
                     name:'Category',
                     props:['title'],
                     //数据在子组件自身
                     data() {
                         return {
                             games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                         }
                     },
                 }
             </script>
     ```

重要文件源码

App.vue

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

        <Category title="游戏">
            <ul>
                <li v-for="(g,index) in games" :key="index">{{ g }}</li>
            </ul>
        </Category>

        <Category title="游戏">
            <ul>
                <li v-for="(g,index) in games" :key="index">{{ g }}</li>
            </ul>
        </Category>
        -->

        <!-- 因为我把数据放到了 子组件Category.vue ,所以继续简化 -->
        <Category title="游戏">
            <!-- 无序列表 
            如果想接收到 子组件 通过 插槽传递过来的 games，就需要在外面包裹一层 <template scope=""></template>

            下面的意思: 把Category.vue子组件 slot插件提交过来的内容 给 softool ，然后在此使用的时候，从 softool 内拿数据即可。
            -->
            <template scope="softool">
                <!--{{ softool }}-->
                <ul>
                    <li v-for="(g,index) in softool.youxis" :key="index">{{ g }}</li>
                </ul>
            </template>
        </Category>

        <!-- 有序列表 -->
        <Category title="游戏">
            <template scope="softool">
                <ol>
                    <li style="color:red" v-for="(g,index) in softool.youxis" :key="index">{{ g }}</li>
                </ol>
            </template>
        </Category>
        <Category title="游戏">
            <!--<template scope="softool">
            下面是第2种写法:    //新旧API带来的现象
            -->
            <template slot-scope="softool">
                <h4 v-for="(g,index) in softool.youxis" :key="index">{{ g }}</h4>
            </template>
        </Category>
    </div>
</template>

<script>
    //1. 引入组件
    import Category from './components/Category.vue'

    export default {
        name:'App',
        //2. 注册组件
        components: { Category },

        //上两节课 和 目前的使用场景: Category.vue子组件的使用者App.vue在哪，数据就在哪。
        /*data() {
            return {
                games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽']
            }
        }*/

    }
</script>


<style>
    .container, .foot{
        display: flex;
        justify-content: space-around;
    }

    img{
        width: 100%;
    }
    video{
        width: 100%;
    }
</style>

components\Category.vue

<template>
    <div class="category">
        <h3>{{ title }} 分类</h3>
        <!-- 本节： 因为把数据放在这里，那么我就在此处拿数据放这里 
        此处的意思: 把数据games 通过 youxis属性 传递给了 slot 的使用者。 
               即: 以 youxis 为 key, 以 games 为 value 提交给 当前插件Category.vue 的使用者(父组件)
        -->
       <slot :youxis="games">我是默认的一些内容</slot>

    </div>
</template>

<script>
    export default {
        name:'CategoryVue',

        props:['title'],

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

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

    h3{
        text-align: center;
        background-color: orange;
    }
    /*
    img{
        width: 100%;
    }
    */
</style>