微信小程序组件间通信(一)

作者: wechat 发布时间: 2022-10-18 浏览: 1623 次 编辑

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

说明:父组件向子组件传值,通过 “组件的属性列表” 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>
显示结果:数字:11

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

说明:小程序中使用父组件对象的 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();
},