(一)本节主要是讲述利用微信小程序完成组件功能
(1) 首先在要使用组件的页面里面加入代码。必须在.json文件里面加入
(2) 名字可以随便写。但是要注意路径问题。最开始不加/表示相对路径。加了/表示绝对路径
{
"usingComponents": {
"s-like":"/components/like/index"
}
}
(二) 之列要注意的是小程序绑定数据和vue不一样。他没有：全靠双引号和bind
<s-like count="{{countdata}}" like="{{likeflag}}" bind:likechange="likealert"></s-like>
(三)开始写组件,这里写组件的方法和vue类似。也需要发射出去
// components/like/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
//接收一个数值
count:Number,
//接受一个flag用来切换图标
like:{type:Boolean}
},
/**
* 组件的初始数据
*/
data: {
img1:'images/like.png',
img2:'images/like@dis.png'
},
/**
* 组件的方法列表
*/
methods: {
change(){
let flag = this.properties.like;
let count = this.properties.count;
let result_flag = ! this.properties.like;
console.log(count);
let result_count = result_flag?++count:--count
this.triggerEvent("likechange", {likeflag:result_flag,likecount:result_count})
}
}
})
