vue 插槽slot

插槽

什么是插槽slot？

1. 插槽（slot）是vue提出来的一个概念，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显示不显示、怎样显示都是由父组件进行控制的，而插槽在哪里显示就由子组件来进行控制

2. 分类

   1. 默认插槽
      提示：通过slot在子组件中为将要设置的内容占位，在父组件中调用子组件的时候，在子组件的内容，向子组件传递slot占位的内容，slot所在的位置就是父组件要显示的内容

      	//父组件：
      		<div id ="#app">
      			<子组件>
      				<p>我的世界</p>
      			</子组件>
      		</div>
      
      	//子组件
      		<子组件>
      			<slot></slot>
      		</子组件>
      

   2. 插槽的默认内容
      
      

   3. 具名插槽
      <slot name ="插槽的名字"></slot>
      提示：默认插槽在传递多个信息的时候已经不能满足用户的需求，于是，通过name属性，我们可以为每个slot起一个名字，通过名字来传递我们想要传递的内容，若没有设置名字，则传递默认插槽的值

       		//父组件：
       					<div id ="#app">
       						<子组件>
       							<p slot="name1">传输内容1</p> //slot与下面的相互对应
       							<p slot="name2">传输内容2</p>
       						</子组件>
       					</div>
       	
       		//子组件
       					<子组件>
       						<slot name=“name1“></slot>
       						<slot name=“name2“></slot>
       					</子组件>
      

   

   4. 作用域插槽
      slot-scope:父组件可以获取子组件中携带的数据

      //父组件：
      		<div id ="#app">
      			<子组件>
      				<template slot-scope="接收子组件传递过来的数据的变量名">
      					<p>{{变量名}}</p>
      				</template>
      			</子组件>
      		</div>
      
      //子组件
      			<子组件>
      				<slot :传递给父组件的变量名=“变量名”></slot>
      			</子组件>
      

      5. v-slot
         提示：在vue2.6版本开始，使用v-slot 代替 slot 和 slot-scope ，slot 和 slot-scope已经废弃，暂时仍旧可以使用（vue3的语法 就用v-slot）

         //父组件：
         	<div id ="#app">
         		<子组件>
         			<template v-slot=“传递的名字”>
         				//slot 的传递内容
         				{{传递的名字}}
         			</template>
         		</子组件>
         	</div>
         
         //子组件
         		<子组件>
         			<slot name="传递的名字"></slot>
         		</子组件>