微信小程序组件间通信（一）

最新推荐文章于 2025-03-12 23:09:21 发布

转载最新推荐文章于 2025-03-12 23:09:21 发布 · 451 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/tianma3798/blog/2247070

文章标签：

#python

本文详细介绍了微信小程序中父组件如何向子组件传递值及调用子组件的方法，包括组件属性列表的定义与使用，以及父组件通过selectComponent方法获取并操作子组件。同时，文章还提到了小程序中的小数计算问题、请求超时处理和Canvas隐藏问题。

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

2019独角兽企业重金招聘Python工程师标准>>>

一、微信小程序父组件向子组件传值

说明：父组件向子组件传值，通过“组件的属性列表”properties

组件属性列表值，是单向绑定，内部修改组件属性不会同步显示；

组件外部(父组件)修改组件属性，内部展示跟着修改。

使用方式如下

1.组件属性列表定义组件属性

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    innerMsg: {
      type: String,
      value: 'defaultvalue'
    },
    showNum: {
      type: Number,
      value: 100
    }
  },

2.组件中使用、展示属性

<view class='red'>
  {{innerMsg}}
</view>
<view>
  数字：{{showNum}}
</view>

3.父组件设置属性值

<show-two inner-msg='中文内容' show-num='11'></show-two>

显示结果：

二、微信小程序父组件调用子组件定义操作

说明：小程序中使用父组件对象的selectComponent方法，可以根据选择器获取第一个组件对象。

如果获取组件列表可以使用selectAllComponents。

父组件示例代码：

addTwo: function () {
  //根据ID获取组件对象
  var showTwo = this.selectComponent('#myShow');
  //访问属性,使用data访问内部属性和组件属性
  console.info(showTwo.data);
  //执行操作
  showTwo.innerAdd();

  //根据样式获取，建议使用selectAllComponents
  var showThree = this.selectComponent('.myShow');
  console.info(showThree.data);
  showThree.innerAdd();
},

小程序中的小数计算问题/浮点数计算问题

小程序请求超时errMsg : "request:fail socket time out timeout:60000"

微信小程序Canvas隐藏问题处理

转载于:https://my.oschina.net/tianma3798/blog/2247070