如果你想传递一个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的参数。文章来源:https://www.toymoban.com/news/detail-613480.html
<bottomComponent>
<slot name="btn" :row="item"></slot>
</bottomComponent>
以上。
从顶层组件插入的Button组件,就能获取到最底层组件传递过来的值,Vue3本身就支持这种 slot 跨层传递,不需要那些额外的骚操作 XD文章来源地址https://www.toymoban.com/news/detail-613480.html
到了这里,关于Vue3 slot插槽多层传递的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!