最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】小程序的自定义组件中如何传递比如列表之类复杂的数据类型

程序 crifan 1177浏览 0评论
折腾:
【已解决】小程序中如何提取公共部分内容为可复用的组件
期间,已经定义了一个小程序中最基本的自定义组件,
现在想要在引用时传递参数。
对于普通的参数,比如字符串,参考官网:
自定义组件 · 小程序
的:
  <component-tag-name inner-text="Some text"></component-tag-name>
和:
Component({
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
也知道如何用了。
但是此处有点特殊:
希望可以传递一个复杂的数据类型,比如list列表(内部是dict,所以是dict的list)
然后想起来之前别人提到的:
【已解决】小程序中跳转新页面且传递参数
貌似也可以:
把list等复杂结构,先去JSON.stringify(),得到字符串了,再传递
component获取参数后,再去JSON.parse()
理论上也是可以的。但是不够好。
另外,也要去搞清楚:
自定义组件中,何时,去JSON.parse()
感觉涉及到了,类似于Page的onLoad?
看到:
组件生命周期 · 小程序
看来貌似是我要的:
貌似是:attached
Component 构造器 · 小程序
微信小程序之公共组件写法-博客-云栖社区-阿里云
小程序自定义组件传值
微信小程序 父子组件传值通信 – susuzhe – CSDN博客
微信小程序:自定义组件的数据传递 – 个人文章 – SegmentFault 思否
// filter-panel-component.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    mode: String,
    panel: String,
    text: Array,
    active: Array
  },


// index.wxml
<filter-panel mode="mode1" panel="panel1" text="{{panel1Text}}" active="{{panel1Active}}"></filter-panel>

// index.js
panel1Text: [
  {
    'location': '附近',
    'choice': ['不限', '1km', '2km', '3km']
  }, {
    'location': '地铁站',
    'choice': ['江汉路', '光谷广场', '陶家岭', '六渡桥']
  }
],
好像是可以直接传递Array的?
那估计也是可以直接传递Object,用于表示json(或dict)对象的?
-》只要确保json(或dict)的字段都是普通字段,可以被(小程序内部)编码和解码,估计就可以了?
微信小程序:父子间组件传参 – 前端菜鸟 – SegmentFault 思否
还有机制实现反向传递参数呢,不错。
微信小程序自定义组件封装及父子组件传值 | 微信开放社区
那就可以去试试Array了。
【总结】
然后用如下代码:
自定义组件中:
components/book_list/book_list.js
// components/book_list.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    curBookList: {
      type: Array,
      value: [],
    }
  },
...
components/book_list/book_list.wxml
  <view class='book_list'>
    <view
      id="{{curBookItem.id}}"
      wx:for="{{curBookList}}"
      wx:for-index="bookIdx"
      wx:for-item="curBookItem"
      wx:key="id"

      class='book_list_item'
      bindtap='bookItemClickCallback'
    >
      <view class='book_item_logo'>
        <image
          class='book_item_logo_img'
          src="{{curBookItem.coverImgUrl}}"
        />
      </view>
...
调用者中:
pages/detail/detail.wxml
  <view class='detail_recommend_list'>
    <!-- 以下是对一个自定义组件的引用 -->
    <book-list cur-book-list="{{curBookInfo.recommendations}}"></book-list>
  </view>
即可实现,把复杂的dict的list的数据:curBookInfo.recommendations
传递到自定义组件中的属性值:curBookList
然后自定义组件中可以再去for循环,显示对应的信息:
【后记】
看到:
Component 构造器 · 小程序
中举例:
properties: {
    myProperty: { // 属性名
      type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
 
中说了:可以传递Array的。

转载请注明:在路上 » 【已解决】小程序的自定义组件中如何传递比如列表之类复杂的数据类型

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
80 queries in 0.194 seconds, using 22.13MB memory