记录Vue组件插槽的使用

---

在项目中我们经常使用到组件 但是想要改变组件中的内容应该怎么做呢***

例如我们自己封装一个组件

首先这里是我们的子组件部分

这里是我们的父组件部分
当直接在组件中写入文字时候 页面上组件的部分是没有渲染出来的

效果图：
没有刚刚在组件中使用的文字

当我们在子组件中加入slot标签后内容就可以显示出来了

效果图：

这是默认的插槽使用，当在组件中留出布局的位置的时候我们可以使用具名插槽
子组件部分

父组件部分
注意v-slot: 自定义name名字 需要写在template中 template不具有意义 不会渲染影响格式 在v-if 和 v-for同时存在时 可以将 v-if 写在template中 template包住 v-for 的div之类的标签

效果图：

还有一种是作用域插槽

目的：可以获取子组件的内容 子组件的内容通过插槽转到父组件插槽部分中

子组件部分


父组件部分：
slotProps相当于子组件插槽的对象 可以这么写获取子组件的内容

效果图：

第一次写文章如有问题大家多多包涵，本人对插槽的理解也不是很深 ，记录一下以后深入理解后，会进行补充，如果能帮助到您，是我的荣幸。