Vue脚手架的入门基础（四）—— 关于插槽Slot

1.什么时候用插槽

插槽其实就是一个Vue组件复用时候，某些部分可能需要使用该Vue组件的对象自定义。这样说比较笼统，这边给一个需求就知道了。
下图是三个Vue组件的复用，除了背景Card，标题，卡片中的内容是自定义的，也就是用卡片的外部对象决定的，决定里面放的是图片、视频、列表、还是超链接。

2.插槽的三种使用方式

① 默认插槽

其实就是最基础的插槽调用:
1.定义了一个Category组件
2.在App中调用了这个Category组件
3.在App中标签中放入需要的自定义内容（例如图片、视频等）
4.Vue将自定义的内容渲染 Category 组件中的标签所在位置
父组件：

		
		<Category title="衣物" :listData="foods">
            <img src="https://gitee.com/fuyining/pic-go_img/raw/master/images/16.jpg" alt="">
            <a href="https://www.baidu.com">关于我们a>
        Category>
        

子组件：

		
		<template>
		    <div class="category">
		        <h3>{{title}}分类h3>
		        <slot>slot插入出现异常slot>
		    div>
		template>
		

② 具名组件

给slot标签命名，可以渲染多个位置。
下方例子中

就会把ul整个渲染到组件中标签的位置，about同理。
父组件：

        <Category title="游戏" :listData="games">
            <ul slot="content">
                <li v-for="(item,index) in games" :key="index">{{item}}li>
            ul>
            <div class="foot" slot="about">
                <a href="https://www.baidu.com">更多游戏a>
                <a href="https://www.baidu.com">关于游戏a>
            div>
        Category>
        

子组件：

		<div class="category">
	        <h3>{{title}}分类h3>
	        <slot name="content">slot插入出现异常slot>
	        <slot name="about">slot插入出现异常slot>
	    div>
	    

③ 作用域组件

很多时候调用插槽时候，数据会放在子组件中，那这样做自定义的时候，父组件无法随心所欲的调用子组件数据时候，就可以用作用域组件，简单说就是在子组件中的增加props一样的数据（这里是：games=”games“），父组件中只需要在组件中加