组件传参

父组件 → 子组件

• 采用属性绑定的方式
• 只能传递普通参数
• 子组件使用属性 properties 定义参数接口
• - 完整声明 - 类型type和值value

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

properties: {
    icon:String
}

• 应用：购物车或收藏等为空时，利用条件渲染展示空组件
• 属性：图标和标题；图标使用 阿里字体图标 Iconfont
• 逻辑 - 仅定义图标和标题属性；默认是购物车

properties: {
    icon: {
      type: String,
      value: 'icon-cart-empty'
    },
    title: {
      type: String,
      value: '购物车'
    }
  }

• 结构

<view class="empty-com">
  <text class="iconfont {{icon}}"></text>
  <text>{{title}}空空的，去逛逛吧</text>
</view>

• 样式略

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

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

3. 组件结构 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>

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

.img{
    width: 100%;
}

5. 父组件配置 json - 引入

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

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

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

7. 父组件逻辑 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
        })
    }
})

1. 创建子组件

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

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

2. 设计子组件

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

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

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

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

3. 父组件 - 引入组件

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

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

父组件 - 使用组件

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

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

采用事件绑定

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

子组件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',
    })
}