wepy框架使用

最新推荐文章于 2025-04-10 17:11:14 发布

置顶八戒小帅哥

最新推荐文章于 2025-04-10 17:11:14 发布

阅读量304

点赞数

CC 4.0 BY-SA版权

分类专栏： JS wepy 文章标签： wepy 组件传值对象形式

本文链接：https://blog.youkuaiyun.com/qq_41181422/article/details/80663922

JS 同时被 2 个专栏收录

1 篇文章

订阅专栏

wepy

1 篇文章

订阅专栏

本文探讨了使用wepy框架进行小程序开发时遇到的组件化开发问题，特别是动态传值方面的挑战。通过实例展示了如何利用wepy的<repeat>标签及Object.key方式实现动态属性绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件化开发（动态传值问题）

今天使用wepy框架，发现和vue，react还是有很大区别的，在此聊下组件传值方面的问题

1、写一个mp-cell组件，然后动态传值，一般我们要传入的值是从后台取回来的会放到一个对象中，此时按照下面传值是不成功的，除非把name挂在data上，也即name:'tom',在传入name。这样太麻烦了。

2、解决方式请看第三张图，用wepy自带的<repeat>标签对组件进行包裹，for我们在data里定义的对象，组件就可以使用Object.key方式动态传入属性值啦

<mp-cell1 label="车牌号码" :value="result.name" disabled></mp-cell1>

export default class CompleteInfo extends wepy.page {
  config = {
    navigationBarTitleText: '完善资料'
  };
  components = {
    'mp-cell1': mpCell,
    'mp-cell2': mpCell
  };
  data = {
    name:'tom'
    result: {
      name: '2233'
    }
  };
}

<repeat for="{{result}}">
        <view class="head">
            <mp-cell1 label="车牌号码" :value="result.name" disabled></mp-cell1>
        </view>
 </repeat>