浅谈Vue中的插槽

简单的介绍下Vue插槽

    在官网中是这么说的 : Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。

  通俗一点讲,slot是在父组件中控制子组件显示或者隐藏相关内容。

  插槽是Vue为组件的封装者提供的能力， 允许开发者在封装组件时 ， 把不确定的、希望用户指定的部分定义为插槽。主要分为匿名插槽，具名插槽，作用域插槽三种，接下来我们一一介绍

 1. 匿名插槽 

顾名思义 ， 就是没有名字的插槽。

//子组件Left中
//如果不给插槽指定name属性的值, 默认是default
<slot></slot>
//父组件中
<Left>
    <h2>拿来吧你</h2>
</Left>

如果在封装组件中, 没有预留插槽 ,name用户提供的任何自定义内容都会被丢弃

2.  具名插槽

如果我们在封装组件时, 需要预留多个插槽节点, 那么我们需要为每个插槽指定具体的name属性

//子组件中
<div class="title">
		<slot name="title"></slot>
 </div>
//父组件中
//v-slot:  的缩写是  #
<template #title>
	<h3>静夜诗</h3>	
</template>

3. 作用域插槽

在封装组件的过程中, 可以为预留的插槽绑定自定义数据 , 带有props数据的插槽就是作用域插槽

//子组件中
<div class="conetent">
   <slot name="content" msg="哈哈哈哈哈" user="嘻嘻嘻嘻嘻">
   </slot>
</div>
//父组件中
<template #content="scope">
//scope接收的一个对象
        <p> {{ scope.msg }} </p>
		<p>{{ scope.user }} </p>
</template>
//解构赋值来接收
<template #content="{msg,user}">
//可以直接解构赋值得到对应的属性
	<p> {{ msg }} </p>
	<p>{{ user }} </p>
</template>

总结:

• 默认情况下,在使用组件的情况下 , 填充的内容会被放到default插槽中
• 如果省略了slot的name名称 , name的默认名称是default
• 如果要把内容填充到指定的插槽中 , 需要使用v-slot(简写为 # )指令
• v-slot指令不能直接用在元素身上, 必须用在template身上
• template是一个虚拟的标签, 只起到一个包裹的作用, 不会被渲染成任何实质的元素
• 在使用具名插槽和作用插槽时 , 父组件中的v-slot值必须和子组件中slot的name值对应