前言
本系列主要整理前端面试中需要掌握的知识点。本节介绍对插槽(slot)的理解。
一、插槽(slot)是什么
- slot是组件内的一个占位符,该占位符可以在后期使用自己的标记语言填充。
- 作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信方式,适用于
父组件===>子组件
- 例子:
//父组件中
<Category>
<div>html结构</div>
</Category>
//子组件中:
<template>
<div>
<slot>插槽的默认内容</slot>
</div>
</template>
二、使用场景
- 通过插槽可以让用户拓展组件,去更好地复用组件和对其做定制化处理;
- 如果父组件在使用到一个复用组件的时候,这个组件在不同的地方有少量的更改,如果去重写组件是很浪费,这时,通过slot插槽向组件内部指定位置传递内容,完成这个复用组件在不同场景的应用。
- 比如:布局组件、表格列、下拉选项、弹框显示内容等。
三、slot的分类
默认插槽
子组件用<slot>
来标记渲染的位置,在父组件的自定义标签中写slot中的结构。如果在子组件的<slot>
中写了结构,那么会作为默认显示的内容。
//父组件(数据在父组件中)
<template>
<div id="app">
<Category title="美食">
<ul>
<li v-for="(item,key) in foods" :key="key">{
{item}}