求助前端大佬,请问vue递归组件怎么让slot在组件最外层生效?

kakai 发布于 2019/10/13 22:49
阅读 2K+
收藏 1

开源之夏第三届火热来袭,高校学生参与赢万元奖金!>>>

求助前端大佬,请问vue递归组件怎么让slot在组件最外层生效?也就是slot也能有递归的效果,应用场景是一个树形菜单,在菜单项中定义一个slot插槽,在树形菜单最外层替换这个slot,使菜单项能充分自定义,最早利用v-html插值,不过插入的组件不会被编译,所以只能用slot。看官方文档没找到解决方案,求助!谢谢!

加载中
0
kakai
kakai

引用来自“a1178013314”的评论

slot做不了,用render写ba

谢谢!不过我刚用slot实现了,在递归组件中使用署名插槽,并同时在递归组件递归的地方用类似如下

<template v-if="!!params.slotFields && params.slotFields.length>0"
                  v-for="slotField in params.slotFields" v-slot:[dynamicSlotName(slotField)]="props">
          <slot :name="dynamicSlotName(slotField)" v-bind:model="props.model"></slot>
        </template>

代码进行slot插槽嵌套,再在包裹递归组件的父级组件中再次使用如下代码进行插槽嵌套,以此构造一个完整的树形组件。

使用树形组件时,只要知道插槽名就能照常使用插槽分发功能了。

 

osc_35581368
osc_35581368
slotFields这个数组是怎么来的?
osc_35581368
osc_35581368
大佬 有完整的代码吗?
kakai
kakai
回复 @osc_35581368 : 用于确定插槽唯一命名的
osc_35581368
osc_35581368
楼主 你的 dynamicSlotName 这个方法是干嘛的
0
a
a1178013314

slot做不了,用render写ba

0
yy_y
yy_y

最近也遇到相同的问题啊!!具体怎么解决啊

0
coderceo
coderceo

引用来自“kakai”的评论

引用来自“a1178013314”的评论

slot做不了,用render写ba

谢谢!不过我刚用slot实现了,在递归组件中使用署名插槽,并同时在递归组件递归的地方用类似如下

<template v-if="!!params.slotFields && params.slotFields.length>0"
                  v-for="slotField in params.slotFields" v-slot:[dynamicSlotName(slotField)]="props">
          <slot :name="dynamicSlotName(slotField)" v-bind:model="props.model"></slot>
        </template>

代码进行slot插槽嵌套,再在包裹递归组件的父级组件中再次使用如下代码进行插槽嵌套,以此构造一个完整的树形组件。

使用树形组件时,只要知道插槽名就能照常使用插槽分发功能了。

 

楼主有没有例子给一个看看

OSCHINA
登录后可查看更多优质内容
返回顶部
顶部