小程序组件

自定义组件

自定义组件

如何自定义组件

1、在小程序目录下创建一个文件夹，这个文件夹用来存放所有的自定义组件

- components
    - com  # 创建完com目录之后，右键该目录选择创建component，名字填xxx
        - xxx.js
        - xxx.json
        - xxx.wxml
        - xxx.wxss
- pages
- utils
....

2、如同上面的目录结构，每个组件都会有一个文件夹包裹，模拟pages的方式来管理自定义组件。eg：com目录下管理的4个组件文件

3、想要在页面中使用引用该自定义组件，必须在该页面下的.json中注册我们自定义组件

{
  "usingComponents": {
    "com" : "/components/com/com"
  }
}

4、在页面的.wxml中就可以直接使用了

<com></com>

页面向组件传参

1、组件中的.wxml文件肯定有一个变量来接收页面的传值

<!-- com.wxml -->
<!--name的值是由页面传递过来的-->
<view>{{name}} is my best friend.</view>

2、我们要在组件的js文件中给这个name变成组件的属性

  properties: {
    name:{    //属性名
      type:String,  //属性的类型
      value:"egon"  // 属性的默认值，如果页面没有给这个name赋值，就使用这个value的值
    }
  },

3、页面中直接给这个组件的name属性赋值就可以了，相当于传值

<com name = "lxx"></com>  //可以是固定值
<com name = "{{name1}}"></com> //这里的可以是变量

组件向页面传递事件

1、组件要绑定一个事件，写法如下

<button bindtap="com_jia" data-num="3">点我加1</button>

2、在组件的.js文件中

  /**
   * 组件的方法列表
   */
  methods: {
    com_jia:function(e){
      console.log("con-jia",e)
      //把事件抛给页面
      this.triggerEvent("jia1",{num:e.currentTarget.dataset.num}) //jia1是组件向页面抛出的事件类型。所以我们在页面重要去捕获这个事件，如果我们要向页面抛事件时候，传参数，例如：{num:e.currentTarget.dataset.num}
    }
  }

3、在页面的.wxml文件中捕获组件中传递过来的事件

<com  bind:jia1 ="jia"></com>

4、页面的事件的响应函数

jia:function(e){
    console.log(e)//组件传过来的参数，在e.detail中
    var that = this
    that.setData({
      num : that.data.num + +(e.detail.num)
    })
 
  }