Vue2【插槽】

目录

1：插槽-默认插槽：

2：插槽-具名插槽 ：

3：插槽-作用域插槽：

总结：2023再见，2024再见！！！

---

1：插槽-默认插槽：

作用：让组件内部的一些结构，支持自定义的，支持复用，假如我点击一个添加按钮弹出一个框进行询问是否选择添加，我删除一条数据想要弹窗给用户询问是否删除。这两条弹窗结构都是一样的，可以封装成插槽进行复用。

需求：要在页面中显示一个对话窗，封装成一个组件

问题：组件的内容不希望是固定的，弹窗中的内容希望支持自定义，如何实现？

插槽基本语法：

1：在组件中需要定制的结构部分，使用占位

2：使用组件时，传入定制的结构替换slot

代码示例：

在父组件中使用两次子组件实现两个子组件展示的内容不同

子组件代码示例：

效果：这样父组件中使用的两次相同子组件，内容可以做到不同

如果不在父组件中传值，可在子组件占位的默认值中填写默认值，当父组件中使用这个子组件进行传值的时候父组件传的值会覆盖默认值

 

2：插槽-具名插槽 ：

需求：一个组件内有多处结构，需要外部传入标签，进行定制

默认插槽：一个的定制位置

就是说子组件有多个位置需要父组件传值进行定制。可以用具名插槽进行定制

代码示例：

父组件

 子组件：

效果： 

 

3：插槽-作用域插槽：

代码实现：

父组件：

子组件：

总结：2023再见，2024再见！！！