vue中的插槽

插槽是什么

插槽（slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。
插槽分为:
1、默认插槽
2、具名插槽
3、作用域插槽

默认插槽

APP父组件

  <div class="app">
    <Category :listdata="foods" title="美食">
      <img src="./assets/logo.png" alt="">
    </Category>
   </div>

Category子组件

    <div class="content">
        <h3>{{title}}</h3>
        <ul>
         	<h3>不是插入位置</h3>
         	<h3>不是插入位置</h3>
         	<h3>不是插入位置</h3>
          <slot>默认值,传值就会消失</slot>
        </ul>
    </div>

• 如果不在子组件添加v-slot, img标签不知道插入的具体位置
• 当传入值后v-slot原来的数据不再显示

具名插槽

当有多个标签需要插入到子组件时,需要使用具名插槽。 可以把标签传入名字相对应的插槽
APP父组件

	<div class="container">
		<Category title="美食" >
			<p slot="header">插入子组件头部的数据</p>
			<img slot="footer" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
		</Category>
	</div>

Category子组件

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

当标签是template是 v-slot:footer 和 v-slot=‘footer’ 功能一样

作用域插槽

APP父组件 !!!必须用template标签包裹

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

Category子组件

	<div class="category">
		<h3>{{title}}分类</h3>
		<slot :games="games" msg="hello">我是默认的一些内容</slot>
	</div>