什么是插槽
插槽(Slot)是 vue 为组件的封装者提供的功能,允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽。
可以把插槽认为是组件封装期间,为用户预留的内容的占位符,在组件的使用者使用该组件时可以为插槽指定填充的内容。
插槽共有三种使用方法
默认插槽,具名插槽,作用域插槽
默认插槽
在封装组件时,可以通过<slot>
元素定义插槽,从而为用户预留内容占位符。
父组件的代码
<template>
<div>
<Category>
<img src="img.png"/>
</Category>
</div>
</template>
子组件中的代码
<template>
<div >
<!-- 挖了个坑 默认插槽 -->
<slot></slot>
</div>
</template>
其中父组件中在Category中写的代码将会赋给子组件定义的插槽中,如果子组件没有定义任何插槽,那么父组件填充的代码将不会有任何生效
具名插槽
如果在封装组件时需要预留多个插槽节点,则需要为每个 <slot>
插槽指定具体的 name 名称。
这种带有具体名称的插槽叫做“具名插槽”。
注意:没有指定 name 名称的插槽,会有隐含的名称叫做 “default”。
父组件的代码
<template>
<div>
<Category>
<img slot="center" src="img.png"/>
<a href="#" slot="footer">点击跳转到....</a>
</Category>
</div>
</template>
子组件的代码
<template>
<div>
<!-- 具名插槽 -->
<slot name="center"></slot>
<hr/>
<slot name="footer"></slot>
</div>
</template>
其中父组件中在Category中写的代码将会赋给子组件定义的插槽中,会根据父组件对标签中的slot属性定义的name到子组件中寻找插槽位置,并赋予组件中对应的插槽
作用域插槽
在封装组件的过程中,可以为预留的<slot> 插槽绑定 props 数据,这种带有 props 数据的<slot> 叫做“作用域插槽”。
作用域插槽,要显示的数据已经在组件中,以什么样的样式显示数据(用什么标签和标签的样式),可以由组件的使用者进行指定。
为作用域插槽指定插槽内的元素必须使用 <template> 标签。
作用域插槽也能取名
父组件的代码
<template>
<div>
<Category>
//作用域插槽
<template scope="obj">
<ul >
<li v-for="(g,index) in obj.games" :key="index">
{{g}}
</li>
</ul>
</template>
</Category>
</div>
</template>
子组件的代码
<template>
<div>
<!-- 作用域插槽 -->
<slot :games="games"></slot>
</div>
</template>
可以通过作用域插槽把列表的每一行的数据传递给组件的使用者。
插槽主要是让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ----> 子组件 。