Vue 组件插槽的深层传递

基础入门：父组件调用子组件插槽传递方案

1. 在子组件child.vue定义了名为solt1的命名插槽

<template>这是子组件<slot name="slot1"></slot1>
</template>

2. 在父组件引用child.vue组件，并向插槽中传递自定义模版代码进行渲染

<template>这是父组件<child><template #slot1><a-input></template></child>
</template>

3.这样在组件运行时，就能将input 渲染到合适的位置上去。

插槽进阶：

如果子组件内调用了另一个子组件2，在子组件2中如何需要插槽渲染，父组件如何将插槽传递给子组件2中呢？

1. 在子组件child2.vue定义了名为solt2的命名插槽

<template>这是子组件<slot name="slot2"></slot1>
</template>

2. 在子组件child1.vue中调用了子组件child2.vue; 子组件1只是一个桥梁，

<template><slot name="slot2"></slot1> <!--此处正常渲染input-->这是子组件<child2><slot name="slot2"></slot1> <!--此处无法渲染input--></child2></template>

3. 在父组件引用child2.vue组件，并向插槽中传递自定义模版代码希望渲染到child2组件内使用

<template>这是父组件<child1><template #slot1><a-input></template></child1>
</template>

4. 运行之后，发现inpit在child1中得到了渲染，但是没有传递到child2中，应该是在child1中被阻断了

解决插槽的深度传递

在child1进行改造; 这样任何插槽都能传递到child2组件中。如果有更深层，则每一层都要加上这个代码；此处是vue2语法，vue3语法不一样，解决方案就是这样。

<template><slot name="slot2"></slot1> <!--此处正常渲染input-->这是子组件<child2><template v-for="name in Object.keys($scopedSlots)" #[name]="scope"><slot :name="name" v-bind="scope"/></template></child2></template>