【前端知识之Vue】对插槽（slot）的理解

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍对插槽（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}}