注册 登录
sonicsunsky
sonicsunsky
  • 发布：2018-10-29 13:08
  • 更新：2023-12-28 22:29
  • 阅读：23061

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

    2019-04-17 12:12 分享

    • 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

    2019-04-17 14:40 分享

    • 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的问题了吗?

    2018-10-31 15:23 分享
    sonicsunsky

    sonicsunsky (作者)

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

    2018-11-01 09:46 分享

    • DCloud_UNI_HRK

      升级hx，manifest设为自定义组件编译模式之后还会复现该问题吗？

      2024-01-11 16:16

    评论 取消
    deak100

    deak100

    我也等呢

    2018-11-01 19:08 分享

    • DCloud_UNI_HRK

      升级hx，manifest设为自定义组件编译模式之后还会复现该问题吗？

      2024-01-11 16:16

    评论 取消
    sonicsunsky

    sonicsunsky (作者)

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

    2018-11-02 10:18 分享

    • 3***@qq.com

      楼主怎么规避的？

      2019-04-13 13:10

    • DCloud_UNI_HRK

      升级hx，manifest设为自定义组件编译模式之后还会复现该问题吗？

      2024-01-11 16:16

    评论 取消
    haoMan

    haoMan - 活到老学到老

    我也是遇到这个问题 头大

    2019-01-10 15:40 分享

    • DCloud_UNI_HRK

      升级hx，manifest设为自定义组件编译模式之后还会复现该问题吗？

      2024-01-11 16:16

    评论 取消
    l***@163.com

    l***@163.com

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

    2019-01-17 10:38 分享

    • DCloud_UNI_HRK

      升级hx，manifest设为自定义组件编译模式之后还会复现该问题吗？

      2024-01-11 16:16

    评论 取消
    h***@qq.com

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

    同样问题

    2019-01-26 19:51 分享

    • DCloud_UNI_HRK

      升级hx，manifest设为自定义组件编译模式之后还会复现该问题吗？

      2024-01-11 16:16

    评论 取消
    8***@qq.com

    8***@qq.com - 842022895

    为什么还没有修复

    2019-02-28 12:04 分享

    • DCloud_UNI_HRK

      升级hx，manifest设为自定义组件编译模式之后还会复现该问题吗？

      2024-01-11 16:16

    评论 取消
    s***@126.com

    s***@126.com

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

    2019-03-12 17:30 分享

    • DCloud_UNI_HRK

      升级hx，manifest设为自定义组件编译模式之后还会复现该问题吗？

      2024-01-11 16:15

    评论 取消
    5***@qq.com

    5***@qq.com

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

    2019-03-15 10:59 分享

    • DCloud_UNI_HRK

      升级hx，manifest设为自定义组件编译模式之后还会复现该问题吗？

      2024-01-11 16:15

    评论 取消
    山顶上有只傻狗

    山顶上有只傻狗

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

    2019-03-19 13:45 分享

    • DCloud_UNI_HRK

      升级hx，manifest设为自定义组件编译模式之后还会复现该问题吗？

      2024-01-11 16:15

    评论 取消
    好多bug啊

    好多bug啊 - lla

    slot-scope

    2019-03-20 10:42 分享

    • 好多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不就相当于所有子组件都需要写到父页面中。。这个问题不先解决。。写起来真的很难受。。

    2019-03-21 09:31 分享

    • DCloud_UNI_HRK

      升级hx，manifest设为自定义组件编译模式之后还会复现该问题吗？

      2024-01-11 16:16

    评论 取消
    柳下飞飞

    柳下飞飞

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

    2019-03-28 18:18 分享

    • 落叶疏影

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

      2020-09-25 21:22

    • DCloud_UNI_HRK

      回复 落叶疏影: 升级hx，manifest设为自定义组件编译模式之后还会复现该问题吗？

      2024-01-11 16:16

    评论 取消
    evanzeng

    evanzeng

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

    2019-04-07 13:45 分享

    • DCloud_UNI_HRK

      升级hx，manifest设为自定义组件编译模式之后还会复现该问题吗？

      2024-01-11 16:16

    评论 取消
    3***@qq.com

    3***@qq.com - simon

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

    2019-04-13 01:50 分享
    3***@qq.com

    3***@qq.com - simon

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

    2019-04-13 20:13 分享

    • m***@163.com

      并没有解决这个问题

      2019-07-15 18:07

    • DCloud_UNI_HRK

      回复 m***@163.com: 我将尝试验证并复现你的问题，如果可以，最好提供问题工程以更快协助我们定位问题

      2024-01-11 16:14

    评论 取消
    梦尋Junjie

    梦尋Junjie - 原来她有男朋友

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

    2021-07-22 15:29 分享

    • DCloud_UNI_HRK

      我将尝试验证并复现你的问题，如果可以，最好提供问题工程以更快协助我们定位问题

      2024-01-11 16:14

    评论 取消
    Peter_Liu

    Peter_Liu - 7

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

    2021-11-03 11:32 分享

    • DCloud_UNI_HRK

      我将尝试验证并复现你的问题，如果可以，最好提供问题工程以更快协助我们定位问题

      2024-01-11 16:14

    评论 取消
    b***@163.com

    b***@163.com

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

    2021-12-02 19:26 分享

    • DCloud_UNI_HRK

      我将尝试验证并复现你的问题，如果可以，最好提供问题工程以更快协助我们定位问题

      2024-01-11 16:14

    评论 取消
    b***@163.com

    b***@163.com

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

    2021-12-02 19:30 分享
    l***@163.com

    l***@163.com

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

    2022-06-15 17:21 分享

    • DCloud_UNI_HRK

      我将尝试验证并复现你的问题，如果可以，最好提供问题工程以更快协助我们定位问题

      2024-01-11 16:14

    评论 取消
    z***@163.com

    z***@163.com

    非常棒！！！ 5年了 这bug还没修复！！！

    循环中的动态插槽名不生效

    2023-07-27 15:23 分享

    • DCloud_UNI_HRK

      我将尝试验证并复现你的问题，如果可以，最好提供问题工程以更快协助我们定位问题

      2024-01-11 16:14

    评论 取消
    1***@qq.com

    1***@qq.com 

        <view class="u-tabs" :style="{  
        background: bgColor  
    }">  
        <!-- $u.getRect()对组件根节点无效，因为写了.in(this)，故这里获取内层接点尺寸 -->  
        <view :id="id">  
            <scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft" scroll-with-animation>  
                <view class="u-scroll-box" :class="{'u-tabs-scorll-flex': !isScroll}">  
                    <view class="u-tab-item u-line-1" :id="'u-tab-' + index" v-for="(item, index) in list" :key="index" @tap="clickTab(index)"  
                     :style="[tabItemStyle(index)]">  

                        <!-- {{ item[name] || item['name']}} -->  
            <slot :item="item" :count="count" :name="name">  
              <u-badge :count="item[count] || item['count'] || 0" :offset="offset" size="mini"></u-badge>  
              {{ item[name] || item['name']}} 00  

            </slot>  
            <slot name="titleEx" :item="item" :count="count" :name="name">  
              11  
            </slot>  
                    </view>  
                    <view v-if="showBar" class="u-tab-bar" :style="[tabBarStyle]"></view>  
                </view>  
            </scroll-view>  
        </view>  
    </view>  

                <u-tabs :list="tabs" :is-scroll="true" :current="tabIndex" @change="tabChange" active-color="#000000"  
                inactive-color="#999999" :customStyle="{'background-color':'#050505'}">  
        <template v-slot:default="{ item, count, name }">  
          {{item}}, {{count}}, {{name}}  
        </template>  
                <view #titleEx="{ item, count, name }">  
          <view>  
            <image src="../../static/logo.png"></image>  
            {{ item[name] || item['name']}} - {{item}}, {{count}}, {{name}}  
          </view>  
        </view>  
            </u-tabs>

    结果是
    今日订单 0011
    已完成 0011
    完全没覆盖，，到了一种无法使用的程度

    2023-12-28 22:29 分享

    • DCloud_UNI_HRK

      我将尝试验证并复现你的问题，如果可以，最好提供问题工程以更快协助我们定位问题

      2024-01-11 16:13

    评论 取消
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报