19-VUE的插槽

19-VUE的插槽

---

1.前言

需要三个显示相似内容格式的卡片区域，可以通过组件和父子组件传递数值实现

<!--父组件-->
<template>
<div class="container">
    <CateGory title="美食" :listData="foods" />
    <CateGory title="电影" :listData="films" />
    <CateGory title="游戏" :listData="games" />
    </div>
</template>
<script>
    import CateGory from "@/components/CateGory";
    export default {
        name: "App",
        components:{CateGory},
        data(){
            return{
                foods: ['火锅', '烧烤', '小龙虾'],
                games: ['红色警戒', '穿越火线', '劲舞团'],
                films: ['《教父》', '《拆弹专家》', '《你好，李焕英》']
            }
        },
    }
</script>

<!--子组件-->
<template>
<div class="Categroy">
    <h2>{{title}}分类</h2>
    <ul>
        <li v-for="(item,index) in listData" :key="index">{{item}}</li>
    </ul>
    </div>
</template>
<script>
    export default {
        name: "CateGory",
        props:['listData','title'],
    }
</script>

如果我们需要三个相同的组件分别显示不同的内容该怎么设置代码？这个时候就需要使用VUE中插槽

---

2.Vue的插槽

​ 1.作用：让父组件可以向子组件指定位置插入ht结构，也是一种组件间通信的方式，适用于父组件==>子组件。
​ 2.分类：默认插槽、具名插槽、作用域插槽
​ 3.使用方式：

1).默认插槽:

<!--父组件-->
<template>
<div class="container">
    <CateGory title="美食">
        <img src="../public/image/ShenheGanyu.jpg" alt="">
    </CateGory>
    <CateGory title="电影">
        <ul>
            <li v-for="(g,index) in games" :key="index">{{g}}</li>
    	</ul>
    </CateGory>
    <CateGory title="游戏">
        <video src="../public/video/BLEACHED.mp4" controls></video>
    </CateGory>
    </div>
</template>
<script>
    import CateGory from "@/components/CateGory";
    export default {
        name: "App",
        components:{CateGory},
        data(){
            return{
                foods: ['火锅', '烧烤', '小龙虾'],
                games: ['红色警戒', '穿越火线', '劲舞团'],
                films: ['《教父》', '《拆弹专家》', '《你好，李焕英》']
            }
        },
    }
</script>

<!--子组件-->
<template>
<div class="Categroy">
    <h2>{{title}}分类</h2>
    <!--定义一个插槽（挖个坑，等着组件的使用者进行填充）-->
    <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
    </div>
</template>

2).具名插槽

如果需要插入多个元素到插槽中，可以使用具名插槽进行指定插槽插入显示

<!--父组件-->
<template>
<div class="container">
    <CateGory title="美食">
        <img slot="first" src="../public/image/ShenheGanyu.jpg" alt="">
        <!-- slot="second"指定name属性值为second的slot插槽 -->
        <div class="list" slot="second">
            <a href="https://baike.baidu.com/item">更多详情</a>
    	</div>
    </CateGory>
    <CateGory title="电影">
        <ul slot="first">
            <li v-for="(g,index) in films" :key="index">{{g}}</li>
    	</ul>
        <!-- v-slot:只能写在template标签中，不能写在div标签中 -->
        <template v-slot:second>
            <div class="list">
                <a href="https://www.iqiyi.com/">推荐</a>
                <a href="https://www.iqiyi.com/">热门</a>
                <a href="https://www.iqiyi.com/">国产</a>
    		</div>
            <h4>欢迎前来观影</h4>
		</template>
</CateGory>

<CateGory title="游戏">
    <video slot="first" src="../public/video/BLEACHED.mp4" controls></video>
    <div class="list" slot="second">
        <a href="https://www.bilibili.com/">网络游戏</a>
        <a href="https://www.bilibili.com/">单机游戏</a>
    </div>
</CateGory>
</div>
</template>
<script>
    import CateGory from "@/components/CateGory";
    export default {
        name: "App",
        components:{CateGory},
        data(){
            return{
                foods: ['火锅', '烧烤', '小龙虾'],
                games: ['红色警戒', '穿越火线', '劲舞团'],
                films: ['《教父》', '《拆弹专家》', '《你好，李焕英》']
            }
        },
    }
</script>

<!--子组件-->
<template>
<div class="Categroy">
    <h2>{{title}}分类</h2>
    <!-- 为slot设置name属性以便指定使用 -->
    <slot name="first">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
    <slot name="second">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
</div>
</template>

3).作用域插槽

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。(gamesi数据在Category组件中，但使用数据所遍历出来的结构由App组件决定)

<!--父组件-->
<template>
  <div class="container">
    <CateGory title="电影">
        <!-- value是传递过来的数据 -->
      <template scope="value">
        <ul>
          <li v-for="(g,index) in value.games" :key="index">{{g}}</li>
        </ul>
        <h4>{{value.msg}}</h4>
      </template>
     </CateGory>

    <CateGory title="电影">
        <!-- 对传递过来的数据进行解构赋值 -->
      <template scope="{games}">
        <ol>
          <li v-for="(g,index) in games" :key="index">{{g}}</li>
        </ol>
      </template>
    </CateGory>

    <CateGory title="电影">
      <template slot-scope="{games}">
        <h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
      </template>
    </CateGory>
  </div>
</template>

<!--子组件-->
<template>
<div class="Categroy">
    <h2>{{title}}分类</h2>
    <slot :games="games" :msg="hello">我是默认的一些内容</slot>
    </div>
</template>
<script>
    export default {
        name: "CateGory",
        props:['listData','title'],
        data(){
            return{
                games: ['红色警戒', '穿越火线', '劲舞团','天天炫舞'],
                hello:'你好',
            }
        },
    }
</script>