小程序 Component使用 一

简洁版,详细参考api文档,例:

index 要使用 组件ad。

 

一,子组件中需要的配置:

1.ad组件中 ad.json配置:

{
    "component": true
}

2.ad组件中ad.js使用 Component构造函数:

Component({
    options: {}, // 这个组件的配置
    properties: { // 接收父组件传过来的参数
        attr1: String,
        attr2: {
            type: Object,
            value: {},
            observer: function (newValue, oldValue, changedPath) {
                this.setData({
                    propertyChanged: true
                })
            }
        }
    },
    data: {},
    methods: {}, // 这个组件要使用的方法,组件的事件与数据更新和Page({})是一样的
    // ...
})

 

二,父组件(index)如何使用子组件(ad):

1. 父组件index.json文件中配置

"usingComponents": {
    "tag-name": "/components/ad/ad"
  }
// tag-name: 指定子组件在父组件index.wxml中使用的标签名称

 

2. 父组件index.wxml使用

<tag-name arg-name='{{value}}'></tag-name>
// 在wxml中命名arg-name,对应js命名argName

其中arg-name是子组件中接收参数对象的名称,value是父组件传递的参数

子组件ad.js对应代码:

Component({
    properties: {
        argName: String // String是这个参数的类型,驼峰命名
    }
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值