小程序中组件创建及引入使用
- 创建
- 在miniprogram文件夹下创建components组件文件夹,在components文件夹,单击鼠标右键>新建Component>输入组件名称>创建成功
- 引入
- 在需要用到的page的json文件中配置
{ "usingComponents": { "M-music": "/components/music/musicList" //M-music为自定义的标签名字,后面是创建好的组件路径 } }
- 使用
<M-music></M-music>
小程序中组件传值
- 组件传值
- 定义
<M-music playList="{{item}}"></M-music>
- 接受
properties: { playList: { type: Object } }
- 使用
<view class="playList-content"> <image src="{{playList.picUrl}}"></image> <text>{{playList.playCount}}</text> <view>{{playList.name}}</view> </view>
小程序中组件监听数据
observers: {
//如果监听对象可以写成playList(val),如果是监听对象的属性值,可以写成下面这样
["playList.playCount"](val) {//对playList的playCount属性进行监听
//发生变化是,执行
this.setData({
_count: this._tranNumber(val, 2)
})
}
},
- 在监听变化后重新赋值时不可直接赋值,会陷入死循环,要在data中新定义一个数据,在将值赋给data中的数据