第1个回答 2022-07-25
关于slot插槽的内容比较多，我们一点一点来学习，为了更好的理解slot的作用，我们一边写一个实例，一边来学习。
现在我们要开发一个标题栏组件，在开发中，我们经常会自己做一个标题栏，用来显示页面标题
我们先来写titleBar这个组件的基本结构，现在它显示的标题是固定的，
在App.vue中使用它
现在我们的标题栏组件显示出来了，但是它显示固定内容，显然是不行的，我们需要把显示的标题变为动态，小伙伴们肯定想到了可以用之前学过的porps，从父组件向子组件传递数据的方式实现，
这节课我们要用slot这种方式，
修改titleBar文件的内容，增加<slot></slot>标签
slot中文翻译为插槽，我们可以理解为<slot></slot>标签在这里是一个槽，占了一个位置，等待父组件的内容插入进来
那我们来修改一下父组件的内容
我们看到父组件把内容插入进来的方式是在标签里写上内容，跟原生标签插入内容的方式是一样的
我们看一下最后渲染出来的html的内容
我们看到<title-bar></title-bar>标签里的内容放到里<slot></slot>标签所占的位置
使用slot比使用props更强大的特点有一点就是slot可以直接插入html，比如
渲染html的结果
我们看到span标签占据了原来slot的位置
显示效果：
这就是slot最基本的用法了，简单来说就是在子组件中留个位置，在父组件中，写在标签内部的内容就会传递过来，占上空位。
我们titleBar这个组件在不用页面使用的时候，只要在标签里面写上相应的页面名称就行了
在使用titleBar时，内容并没有给它传递内容
这时当然就不显示内容了
如果你需要在插槽没有插入内容时，显示默认值，那就需要把默认值写在slot标签里面，
我们来修改titleBar的内容
这样，就可以显示一个默认值了
这节课重点主要在于理解slot起到了一个占位作用，父组件调用时，把标签里面的内容放到slot的位置。