微信小程序自定义组件的使用

微信小程序自定义组件的使用

一、创建组件

首先在根目录创建components文件夹 , 然后创建 prolist 文件夹(组件的名字),在文件夹处点击右键新建一个component,输入index 自动生成文件

<!--components/a/index.wxml-->
<text>components/a/index.wxml</text>

二、引入组件

  1. 假设在 index.wxml 里引入组件:
// index.wxml
<view>123</view>

<prolist />
  1. 想在页面中使用组件 需要在 index.json 文件里注册组件
index.json 
{
  "usingComponents": {
    "prolist": "./../../components/prolist/index"
  }
}

三、父组件向子组件传递数据

index.wxml

<view>父组件</view>

<prolist prolist="{{prolist}}" />

index.js

data: {
    prolist: [
      {
        name: '张三',
        age: '18'
      },
      {
        name: '李四',
        age: '20'
      }
    ]
  },

prolist.js

/**
   * 组件的属性列表
   */
  properties: {
    prolist: Array
  }

prolist.wxml

<!--components/prolist/index.wxml-->
<view wx:for="{{prolist}}" wx:key="index">
  <text>{{item.name}}</text>
  <text>{{item.age}}</text>
</view>

父组件向子组件传值以属性的形式,子组件以properties接收,并可指定数据类型type以及默认值
在js中以this.properties.prolist获取。

四、子组件向父组件传值

prolist.js

method: {
  changData() {
    this.triggerEvent('changData', {
      data: [
        {
          name: '李松',
          age: 18
        },
        {
          name: '张三',
          age: 22
        }
      ]
    })
  }
}

index.wxml

<prolist bindchangData="changData" />

index.js

changData(event) {
console.log(event.detail)
}

子组件向父组件传递数据使用this.triggerEvent方法,这个方法接受3个参数:
this.triggerEvent(‘event‘, eventDetail, eventOption);
event为方法名,
eventDetail是传到组件外的数据,
eventOption为是否冒泡的选项,有三个参数可以设置:
bubbles 默认false 事件是否冒泡
composed 默认false 事件是否可以穿越组件边界
capturePhase 默认false 事件是否拥有捕获阶段

在父组件监听事件bindchangData="changData",在changeData方法里有一个event参数,可以从event.detail里拿到组件内部传出来的值。

逆战前行 破局而立

微信小程序自定义组件的使用

上一篇:微信小程序 (全局配置和页面配置)


下一篇:python圆周率计算小程序(非常慢)