sonicsunsky
sonicsunsky
  • 发布:2018-10-29 13:08
  • 更新:2022-06-15 17:21
  • 阅读:19977

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

  • 3***@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

  • s***@126.com

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

    2019-04-17 17:48

  • DCloud_heavensoft

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

    2019-04-18 00:38

  • 唧唧复唧唧

    npm update 哪个包 ?

    2019-10-30 18:26

sonicsunsky

sonicsunsky (作者)

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

sonicsunsky

sonicsunsky (作者)

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

deak100

deak100

我也等呢

sonicsunsky

sonicsunsky (作者)

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

  • 3***@qq.com

    楼主怎么规避的?

    2019-04-13 13:10

haoMan

haoMan - 活到老学到老

我也是遇到这个问题 头大

l***@163.com

l***@163.com

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

h***@qq.com

h***@qq.com - 80后IT男

同样问题

8***@qq.com

8***@qq.com - 842022895

为什么还没有修复

s***@126.com

s***@126.com

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

5***@qq.com

5***@qq.com

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

山顶上有只傻狗

山顶上有只傻狗

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

好多bug啊

好多bug啊 - lla

slot-scope

  • 好多bug啊

    2.6+可以用v-slot

    2019-03-20 10:42

  • m***@qq.com

    @jingxiaotian2016@163.com:你确定APP可以?

    2019-03-21 09:30

  • 3***@qq.com

    这根本就不是作用域插槽的问题。。。

    2019-04-13 13:11

m***@qq.com

m***@qq.com

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

柳下飞飞

柳下飞飞

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

  • 落叶疏影

    请问你是怎么绕过这个问题的啊。求教

    2020-09-25 21:22

evanzeng

evanzeng

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

3***@qq.com

3***@qq.com - 80it

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

3***@qq.com

3***@qq.com - 80it

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

梦尋Junjie

梦尋Junjie - 原来她有男朋友

好巧 我也遇到了, app ,h5 都没有问题 就微信小程序有, 之前的版本都是好的 , 昨天升级了 hbx 今天更新就出现这个问题

Peter_Liu

Peter_Liu - 7

根本没修复,遇到了同样的问题开发工具版本3.2.12.20211029

b***@163.com

b***@163.com

差不多的问题v-for作用域插槽带过来的数组编译不了

b***@163.com

b***@163.com

我是直接把循环换成wx:for可以编译了

l***@163.com

l***@163.com

还是不生效啊,vue3 cli最新不生效

要回复问题请先登录注册