wepy框架使用

最新推荐文章于 2024-03-24 09:30:43 发布

置顶八戒小帅哥

最新推荐文章于 2024-03-24 09:30:43 发布

阅读量270

点赞数

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

本文链接：https://blog.csdn.net/qq_41181422/article/details/80663922

版权

JS 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

wepy

1 篇文章 0 订阅

订阅专栏

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

今天使用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 
  > 
 