微信小程序(八)自定义组件与传值

(一)本节主要是讲述利用微信小程序完成组件功能

(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})
    }
  }
})