18、自定义组件

文档：
组件模板和样式 | 微信开放文档

创建组件

1、在项目根目录中新建一个components文件夹存放组件
2、新建test文件夹存放单个组件，鼠标右键新建component
3、test文件下下生成 4 个文件.js``.json``.wxml``.wxss

引用组件

引用组件可以分为「全局引入」和「局部引入」。

1、如何进行局部引入？

{
  "usingComponents": {
    "my-test1":"/components/test1/test1"
  }
}

<view wx:for="{{ menuList }}" wx:key="index" data-info="{{ item }}" bind:tap="handleTap">
  {{index}}-{{item.name}}
</view>
<!-- 使用组件 -->
<my-test1></my-test1>

2、如何全局引入？

{
  "usingComponents": {
    "my-test2": "/components/test2/test2"
  },
}

然后再任何的wxml文件内都可以使用了。

<view>
  <!--  局部  -->
  <my-test1></my-test1>
</view>
<view>
  <!--  全局  -->
  <my-test2></my-test2>
</view>

我们可以根据组件的使用频率和范围决定全局引入还是局部引入！

页面和组件的区别

1、组件的json文件需要使用component: true进行声明

{
  "component": true,
  "usingComponents": {}
}

2、组件的js文件调用的是Component()函数

// components/test1/test1.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
  }
})

3、组件的事件处理程序需要定义到methods对象中

Component({
  // ...
  /**
   * 组件的方法列表
   */
  methods: {
    // 处理点击事件
    handleTap(){
      // ...
    }
  }
})