vue知识点： 插槽

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

<!-- 父组件：App.vue -->
 <Category>
    <div>html结构1</div>
 </Category>

<!-- 子组件：Category.vue -->
<template>
   <div>
      //定义插槽
      <slot>插槽默认内容。。。</slot>
   </div>
</template>

默认插槽具体举例如下：

<!-- 父组件：src/App.vue -->
<template>
   <div class="container">
      <Category title="美食">
         <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg"/>
      </Category>
      <Category title="游戏">
         <ul>
            <li v-for="(g,index) in games" :key="index">{{ g }}</li>
         </ul>
      </Category>
      <Category title="电影">
         <video 
	         controls 
	         src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
         />
         </video>
      </Category>
   </div>
</template>

<script>
import Category from './components/Category'
export default {
   name: 'App',
   components:{Category},
   data() {
      return {
         foods:['栗子蛋糕','提拉米苏','软牛利'],
         games:['英雄联盟','王者荣耀','穿越火线'],
         films:['《侧耳倾听》','《千与千寻》','《你的名字》']
      }
   }
}
</script>

<style scoped>
.container {
    dispaly: flex;
    justify-content: space-around;
}
</style>

<!--子组件：src/components/Category -->
<template>
   <div class="category">
      <h3> {{ title }} 分类</h3>
      //定义一个插槽，（挖个坑，等组件的使用者进行填充）
      <slot>此处写默认值，当使用者没有传递具体结构时，此处的值就会出现</slot>
   </div>
</template>

<script>
export default {
   name: 'Category',
   props:['title']
}
</script>

<style>
.category {
    background-color: skyblue;
    width: 200px;
    height: 300px;
}
h3 {
   text-align: center;
   background-color: orange;
}
video,img {
   width: 100%;
}
</style>

结果如下图：

（2）具名插槽：父组件指明放入子组件的那个插槽 slot="footer",如果是<template>标签可以写成v-slot:footer

<!-- 父组件：App.vue -->
 <Category>
    <template slot="center">
       <div>html结构1</div>
    </template>
 </Category>
 
  <Category>
    <template v-slot:footer>
       <div>html结构2</div>
    </template>
 </Category>

<!-- 子组件：Category.vue -->
<template>
   <div>
      //定义插槽
      <slot name="center">插槽默认内容。。。</slot>
      <slot name="footer">插槽默认内容。。。</slot>
   </div>
</template>

具名插槽具体举例如下：

<!-- 父组件：src/App.vue -->
<template>
   <div class="container">
      <Category title="美食">
         <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg"/>
         <a slot="footer" href="http://www.baidu.com">更多美食</a>
      </Category>
      <Category title="游戏">
         <ul slot="center">
            <li v-for="(g,index) in games" :key="index">{{ g }}</li>
         </ul>
        <div class="foot" slot="footer">
            <a href="http://www.baidu.com">单机游戏</a>
            <a href="http://www.baidu.com">网络游戏</a>
        </div>
      </Category>
      <Category title="电影">
         <video slot="center"
	         controls 
	         src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
         />
         </video>
         <template v-slot:footer>
            <div class="foot">
               <a href="http://www.baidu.com">经典</a>
	            <a href="http://www.baidu.com">热门</a>
	            <a href="http://www.baidu.com">推荐</a>
            </div>
            <h4>欢迎前来观影</h4>
         </template>
      </Category>
   </div>
</template>

<script>
import Category from './compoments/Category'
export default {
   name: 'App',
   components:{Category},
   data() {
      return {
         foods:['栗子蛋糕','提拉米苏','软牛利'],
         games:['英雄联盟','王者荣耀','穿越火线'],
         films:['《侧耳倾听》','《千与千寻》','《你的名字》']
      }
   },
}
</script>

<style scoped>
.container,.foot {
    dispaly: flex;
    justify-content: space-around;
}
h4 {
   text-align: center;
}
</style>

<!--子组件：src/components/Category -->
<template>
   <div class="category">
      <h3> {{ title }} 分类</h3>
      //定义一个插槽，（挖个坑，等组件的使用者进行填充）
      <slot name="center">此处写默认值，当使用者没有传递具体结构时，此处的值就会出现1</slot>
      <slot name="footer">此处写默认值，当使用者没有传递具体结构时，此处的值就会出现2</slot>
   </div>
</template>

<script>
export default {
   name: 'Category',
   props:['title']
}
</script>

<style>
.category {
    background-color: skyblue;
    width: 200px;
    height: 300px;
}
h3 {
   text-align: center;
   background-color: orange;
}
video,img {
   width: 100%;
}
</style>

结果如下图：

（3）作用域插槽：scope用于父组件往子组件插槽放的html结构接收子组件的数据
可理解为：数据在组件的本身，但根据数据生成的结构需要组件的使用者来决定
本案例中可理解为：games数据在Category组件中，但使用数据所遍历出来的结构由App来决定

<!-- 父组件：App.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>

<!-- 子组件：Category.vue -->
<template slot-scope="scopeData">
   <div>
      <slot :games="games"></slot>
   </div>
</template>

<script>
export default {
   name: 'Category',
   //数据在组件自身
   data() {
      return {
         games:['英雄联盟','王者荣耀','穿越火线'],
      }
   }
}
</script>

注意: 关于样式，既可以写在父组件中，解析后放入子组件插槽，也可以放在子组件中，传给子组件再解析
作用域插槽具体举例如下：

<!-- 父组件：App.vue -->
<template>
   <div class="container">
      <Category title="游戏">
         <template scope="xxx">
	         <ul slot="center">
	            <li v-for="(g,index) in xxx.games" :key="index">{{ g }}</li>
	         </ul>
	     </template>
      </Category>
      <Category title="游戏">
          <template scope="{games}">
	         <ol slot="center">
	            <li v-for="(g,index) in games" :key="index">{{ g }}</li>
	         </ol>
	      </template>
      </Category>
      <Category title="游戏">
          <template slot-scope="{games}">
	         <ol slot="center">
	            <li v-for="(g,index) in games" :key="index">{{ g }}</li>
	         </ol>
	      </template>
      </Category>
   </div>
</template>


<script>
import Category from './compoments/Category'
export default {
   name: 'App',
   components:{Category},
}
</script>

<style scoped>
.container,.foot {
    dispaly: flex;
    justify-content: space-around;
}
h4 {
   text-align: center;
}
</style>

<!--子组件：src/components/Category -->
<template>
   <div class="category">
      <h3>{{title 分类}}</h3>
      <slot :games="games" msg="hello">此处填写默认内容</slot>
   </div>
</template>

<script>
export default {
   name: 'Category',
   props: ['title'],
   data() {
      games:['英雄联盟','王者荣耀','穿越火线'],
   }
}
</script>

<style>
.category {
    background-color: skyblue;
    width: 200px;
    height: 300px;
}
h3 {
   text-align: center;
   background-color: orange;
}
video,img {
   width: 100%;
}
</style>

结果如下图：