组件传参

@Parameter

父组件 → 子组件

采用属性绑定的方式

只能传递普通参数

子组件使用属性 properties 定义参数接口

- 完整声明 - 类型type和值value

properties: {
    icon:{
        type:String,
        value:''
    }
}

- 简化声明 - 类型type；不需要默认值

properties: {
    icon:String
}

封装图片轮播组件my-swiper

不同的轮播组件在不同的页面显示的图片列表和高度不一样；通过传递图片列表参数imgs和高度参数h，采用内联样式设置轮播组件高度

创建组件 my-swiper

组件逻辑js - 声明2个参数，高度默认20，图片列表为空

Component({
    properties: {
        h:{
            type:Number,
            value: 20
        },
        imgs: {
            type: Array,
            value: []
        }
    }
})

组件结构wxml - 内联样式style不需要使用{}

<swiper class="swiper" style="height: {{h}}vh;"  indicator-dots indicator-color="#fff" indicator-active-color="#f40" autoplay circular>
    <swiper-item wx:for='{{imgs}}' wx:key='id'>
        <image class="img" src="{{item.url}}" mode="aspectFill"></image>
    </swiper-item>
</swiper>

组件样式wxss - 轮播图高度由内联样式style指定；这里仅需指定图片大小

.img{
    width: 100%;
}

父组件配置json - 引入

{
    "usingComponents": {
        "my-swiper": "../../components/my-swiper/my-swiper"
    }
}

父组件结构wxml - 使用；传递高度h；绑定图片列表imgs

<my-swiper h='{{25}}' imgs='{{imgs}}'></m-swiper>

父组件逻辑js - 在页面的 onLoad() 中从大树小站请求图片，或自行准备；imgs是data中的定义的数据

wx.request({
    url: 'https://glpla.github.io/utils/data/swiper.json',
    success: res => {
        console.log('res', res);
        this.setData({
            imgs: res.data.cont
        })
    }
})

封装阿里字体图标组件my-iconfont

父组件仅仅传递图标类，控制组件显示相应的字体图标

创建子组件

右键单击组件根目录components → 新建组件目录my-iconfont

再右键组件目录，新建 Component为my-iconfont；组件名和组件目录通常保持一致

设计子组件

wxml：基类iconfont保留，不同的图标类icon通过父组件传递获取

<text class="iconfont {{icon}}"></text>

js：在属性properties中设置将图标类icon的类型和默认值；并允许添加全局类

Component({
    options: {
        addGlobalClass: true,
    },
    properties: {
        icon:{
            type:String
        }
        //简化形式icon:String
    }
})

父组件 - 引入组件

在使用组件的页面.json中配置

{
    "usingComponents": {
        "my-iconfont":"../../components/my-iconfont/my-iconfont"
    }
}

父组件 - 使用组件

在使用组件的.wxml中，将图标类作为属性指定给参数接口即可

<my-iconfont icon='icon-home'></my-iconfont>

子组件 → 父组件

采用事件绑定

子组件绑定传统事件并在事件处理函数中触发|发送|triggerEvent 自定义事件给父组件，可以指定传递的参数

父组件绑定自定义事件并声明事件处理函数

子组件wxml - 声明普通事件tap并指定事件处理函数toCalendar

<view class='nav-item' bindtap="toCalendar">navigation</view>

子组件js - 在事件处理函数toCalendar中触发自定义事件toCal

toCalendar() {
    this.triggerEvent('toCal');
}

父组件 - 使用组件xml - 绑定子组件发送的事件toCal并指定事件处理函数dealCal

<nav bindtoCal="dealCal"></nav>

父组件 - 使用组件js - 实现事件处理函数dealCal

dealCal() {
    wx.navigateTo({
        url: '../calendar/calendar',
    })
}