组件定义及使用

组件定义:

<view class="course"> <image src="{{course.img_url}}"></image> <view class="title"> <view> <text class="title1">{{course.title}}</text> </view> <view> <text class="subtitle">{{course.subtitle}}</text> </view> </view> <button bindtap="btnTap" data-id="{{course.id}}" data-is-full="{{course.isFull}}" style="background-color:{{course.isFull ? '#cacaca' : '#ff547c'}};color:#fff;" class="tips">{{course.isFull ? '人数已满' : '了解课程'}}</button> </view> 对应的js文件: // components/course-component/course-component.js Component({ /** * 组件的属性列表 */ properties: { course:Object }, /** * 组件的初始数据 */ data: { message:'Hello World' }, attached() { console.log(this) }, /** * 组件的方法列表 */ methods: { btnTap(e){ // console.log(e.target.dataset) if (e.target.dataset.isFull) return // 触发自定义事件 this.triggerEvent('myevent', e.target.dataset.id) } } })

在需要使用的地方的json文件中配置:

{ "usingComponents": { "course-component":"../../components/course-component/course-component" } }

使用及传参:

<view> <block wx:for="{{courses}}" wx:key="{{item.id}}"> <course-component bindmyevent="getCourseId" course="{{item}}"/> </block> </view> js文件: getCourseId(e){ // console.log(e.detail) wx.navigateTo({ url: `/pages/course-detail/course-detail?courseid=${e.detail}`, }) },

页面中如何使用它，并且给它传值 1、在页面的json中注册 2、在页面的wxml中去使用 3、在页面的wxml传值给组件 4、在组件的properties中接收值

步骤： 1、创建好组件 component.js Component({}) component.json "component": true 2、在页面的json中注册 usingComponents 3、在页面中根据注册时候的名称来使用组件 <注册组件时候的名称 /> 4、页面传值给组件 页面 属性名=值 组件 properties 5、组件传值给页面 组件 triggerEvent 页面 注册自定义事件，写好函数来接收