sonicsunsky@qq.com
sonicsunsky@qq.com
  • 发布:2018-10-29 13:08
  • 更新:2019-04-17 14:40
  • 阅读:6197

uni-app中v-for循环渲染带有slot的vue自定义组件渲染slot中数据内容无效

分类:HBuilderX

uni-app中v-for循环渲染带有slot的vue自定义组件渲染slot中数据内容无效

如果引入单个组件正常渲染,一旦在外边添加一层block或view的v-for循环如: (item,index) in list ,slot下的数据如item.xxx,item.text等是渲染不出来的


**//单个组件的渲染没有问题,一切正常**  

<uni-swipeout2 operate-width="210">  
            <view slot="content">  
                <view class="swipe-item2">  
                    <view class="title">猛虫过江</view>  
                    <view class="label">侏罗纪世界主题公园及豪华度假村被失控的恐龙们摧毁已有四年</view>  
                </view>  
            </view>  

            <view slot="button">  
                <view class="i-swipeout-demo-button-group">  
                    <view class="i-swipeout-demo-button">点赞</view>  
                    <view class="i-swipeout-demo-button">分享</view>  
                    <view class="i-swipeout-demo-button">删除</view>  
                </view>  
            </view>  
        </uni-swipeout2>  

        **//slot=content和slot=button中的数据内容无法正常显示,类似数据丢了一样**  

        <block v-for="(item,index) in swipeoutList" :key="index">  
            <uni-swipeout2 operate-width="185">  
                <view slot="content">  
                    <view class="swipe-item2">  
                        <view class="title">猛虫过江</view>  
                        <view class="label">{{item.text}}</view>  
                    </view>  
                </view>  

                <view slot="button">  
                    <view class="i-swipeout-demo-button-group" style="background:#2db7f5;">  
                        <view class="i-swipeout-demo-button" style="width:60px;border-right:1px solid #fff;">  
                            <uni-icon size="20" type="zan" color="#fff"></uni-icon>  
                        </view>  

                        <view class="i-swipeout-demo-button" style="width:60px;border-right:1px solid #fff;">  
                            <uni-icon size="20" type="share" color="#fff"></uni-icon>  
                        </view>  

                        <view class="i-swipeout-demo-button" style="width:60px;">  
                            <uni-icon size="20" type="remove" color="#fff"></uni-icon>  
                        </view>  
                    </view>  
                </view>  
            </uni-swipeout2>  
        </block>  
2018-10-29 13:08 分享
已邀请:
HY

HY

最新alpha版可以用
1.9正式版后,手动切换编译模式也可以使用,manifest.json -> app-plus -> usingComponents切换编译模式

// manifest.json    
{    
    // ...    
    /* App平台特有配置 */    
    "app-plus": {    
        "usingComponents":true //是否启用`自定义组件模式`,为true表示新的`自定义组件模式`,否则启用老的`template模板模式`    
    }    
    /* 微信小程序特有配置 */    
    "mp-weixin": {    
        "usingComponents":true //是否启用`自定义组件模式`,为true表示新的`自定义组件模式`,否则启用老的`template模板模式`    
    }    
}    

https://ask.dcloud.net.cn/article/35818

  • 380665023@qq.com

    开启这个之后,如果代码中有使用mixins 会编译报错

    2019-04-17 13:40

  • 云飞扬啊

    最新alpha版兼容以前的代码吗?可以直接下载使用原项目跑吗??

    2019-04-17 21:25

DCloud_heavensoft

DCloud_heavensoft

升级hx,manifest设为自定义组件编译模式。
如果是cli项目,npm update升级cli。
如果是自定义基座,重新制作自定义基座。
如果是离线打包,重新下载sdk

  • stepfen@126.com

    v1.91,自定义组件编译模式, 在微信端报错,usingComponents设置回false才正常

    2019-04-17 17:48

  • DCloud_heavensoft

    回复 stepfen@126.com: 报什么错,看自定义组件的编译注意文档调整。老编译模式很快会被淘汰

    2019-04-18 00:38

sonicsunsky@qq.com

sonicsunsky@qq.com (作者)

新版本修复这个slot的问题了吗?

sonicsunsky@qq.com

sonicsunsky@qq.com (作者)

经过测试新版本还是没有修复这个问题

deak100

deak100

我也等呢

sonicsunsky@qq.com

sonicsunsky@qq.com (作者)

官方啥时候能修复这个bug呀,好多地方都会用到

haoMan

haoMan - 活到老学到老

我也是遇到这个问题 头大

liweioffices@163.com

liweioffices@163.com

解决这个问题了吗?我也遇到了。。。

huxuelin709@qq.com

huxuelin709@qq.com - 80后IT男

同样问题

842022895@qq.com

842022895@qq.com - 所有的语言都显得如此的苍白无力

为什么还没有修复

stepfen@126.com

stepfen@126.com

坑死了, 原来也是这个问题, 坑了1天

543347844@qq.com

543347844@qq.com

框架太坑了,这个常用的功能都有问题,慎用吧,我放弃了

山顶上有只傻狗

山顶上有只傻狗

经过测试新版本还是没有修复这个问题

jingxiaotian2016@163.com
mikasa33@qq.com

mikasa33@qq.com

不能v-for不就相当于所有子组件都需要写到父页面中。。这个问题不先解决。。写起来真的很难受。。

柳下飞飞

柳下飞飞

可以在自定义组件中通过定义一个props:字段对子组件进行取值,父组件里头写一个样式来展示,目前我是这搞得,至少不会再父组件中写死

evanzeng

evanzeng

麻烦尽快解决此问题。谢谢!

380665023@qq.com

380665023@qq.com - 80it

2018-10-29 报出来的问题,现在还没解决。。。无语

380665023@qq.com

380665023@qq.com - 80it

最新alpha版可以解决这个问题
http://ask.dcloud.net.cn/article/35765

要回复问题请先登录注册