Vue 插槽 简要讲解与使用（图解）

重点：插槽是可以让组件内部的一些结构支持自定义的一项技术

插槽允许你在组件的模板中预留一些位置，以便父组件可以将任意内容插入到这些位置，从而增加了组件的灵活性和可重用性。

准备工作：

我们先封装一个组件，先提供代码：

 

 

一、默认插槽

简要讲解：

子组件写一个<slot></slot>标签占位,往父组件上面的子组件标签里填内容，内容会传到子组件里面的slot标签里，默认插槽只能有一个。

 

 

显示出来了的话就说明成功了

默认内容

如果想要在不传值的时候展示默认的内容的话可以直接写在slot标签里

这样的话如果传了内容进来的话会展示传进来的，不传值就会展示默认内容

 

 

 

二、具名插槽 

简要讲解：

子组件写一个<slot></slot>标签占位，并添加属性name=自定义名字：<slot name=text-1></slot>

父组件在子组件标签里添加template标签加上v-slot：或者#对应的名字即可在里面填写内容

具名插槽可以有多个

 具名插槽的使用方法就是这样

三、作用域插槽

简要讲解：

作用域插槽是插槽的一个传参语法，并不属于插槽分类，插槽种类只有默认和具名。

作用域插槽是在定义slot插槽的同时，是可以传值的。给插槽上绑定数据，将来使用组件时可以用。

 

 

 

 

 作用域插槽大概就这样，不懂的话欢迎在讨论区提问！