微信小程序自定义组件的使用

网址：www.bugshouji.com

平时写微信小程序时，没有用到自定义组件，今天了解了一下，还是很简单的。

把对应使用的一些方法分享出来，大家有需要的可以看看

查阅文档：指南 -> 自定义组件

1. 定义组件

首先，创建一个components文件夹，专门用于放组件

然后，在components中创建head文件夹，用于放head组件的文件

然后，选中head,右键选择新建Component(即会生成.js, .json, .wxml, .wxss四个文件)

head.json中，可以看到配置“component”:true; 这是说明head可以作为组件使用

head.js 在js文件中，可以看到使用的是Component()来注册组件

2. 引用组件

相对路径与绝对路径

“./”：代表目前所在的路径

"../"：代表上一层路径

“/”开头，代码根目录（绝对路径）

在要引用组件的页面，设置页面.json文件，如下图：

3. 使用组件

注：使用的组件名，与上面引用时，设置的组件名保持一致

4. 组件通信（父传值）

子组件中，使用properties属性定义传递的属性

properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },

properties: {
 like: {
  type: Boolean,//类型必填,Number，String,Boolean，Object,Array,null(任意类型)
    value: false, //默认值,可以不填，boolean类型的默认值为false
    observer: function(
){} //当传入的值改变的时候，微信小程序会重新执行
  }
}

注意：properties可以在wxml中用{{}}来绑定，和data类似

子组件定义属性

父组件中传递数据

5. 组件自定义事件（子传父）

父组件

注：微信小程序中事件绑定有两种方式

第一种方式: bind:事件名, bind后面需要跟上冒号,冒号后面跟上事件名,例如: <view bind:tap="fnName"></view>

第二种方式：bind事件名，bind 后面直接跟上事件名，例如：<view bindtap=“fnName"></view>

父组件中，可以在e.detail中查看，子组件传过来的值

子组件

6.组件的封闭性、开放性及粒度

组件封装性、开放性:封装在内部 ，开放出来的

粒度：非常简单的功能还是非常复杂的功能