Vue3 slot插槽多层传递

如果你想传递一个slot，从爷到孙的传递，看了网上的一些方案，依赖注入都来了，其实没那么麻烦

直接上代码

最顶层组件，插入一个按钮到 slot name为 btn的插槽里面，Button接收一个row的参数，参数可能有多个，这里用了 { row } 只取 row

<topComponent><template #btn="{ row }"><Button :row="row"/></template></topComponent>

在中间组件，这里把插入一个插槽插入到 slot name为 btn的插槽里面，它接收一个 row的参数，从 v-slot:btn / #btn 里面来的

slot的参数传递是从下往上的,通过 #btn=“xxx” xxx来接收

<middleComponent><template #btn="row"><slot name="btn":row="row"></slot></template></middleComponent>

最底层组件，仅有一个插槽，向上传递 item的值为 row的参数。

<bottomComponent><slot name="btn":row="item"></slot></bottomComponent>

以上。
从顶层组件插入的Button组件，就能获取到最底层组件传递过来的值，Vue3本身就支持这种 slot 跨层传递，不需要那些额外的骚操作 XD

标签： vue 前端

本文转载自: https://blog.csdn.net/qq_32657473/article/details/130124381
版权归原作者 勇哥萌萌哒 所有，如有侵权，请联系我们删除。