【vue】vue中的插槽以及使用方法

 插槽

普通插槽

1、在父组件中直接调用子组件的标签，是可以渲染出子组件的内容；如果在子组件标签中添加了内容，父组件就渲染不出来了；

无名插槽（默认插槽）

ChildComponent.vue：

2、如果父组件调用的子组件标签中和子组件中的插槽中都有文本内容，那么父组件中的会覆盖子组件插槽中的内容；

 ParentComponent.vue：

在上述示例中，ChildComponent 组件使用了一个无名插槽（默认插槽）。在 ParentComponent 中，通过将内容包裹在 标签中，该内容就会被插入到 ChildComponent 的插槽中。 

index.js

以父组件为loginnew，子组件为hello-world为例；

hello-world：我们一起学猫叫

 具名/命名插槽

是 Vue.js 组件中的一种高级插槽技术，允许您在组件中定义多个具有名称的插槽，以便更精细地控制不同部分的内容插入位置。通过使用具名插槽，您可以在父组件中传递不同的内容到不同的插槽位置，从而实现更灵活和定制化的布局和组件复用。

以下是一个使用具名插槽的示例：

ChildComponent.vue：

ParentComponent.vue：

在上述示例中，ChildComponent 组件定义了三个插槽，分别是默认插槽以及具名插槽 header 和 footer。在 ParentComponent 中，使用