微信小程序之自定义组件创建及其字段说明

一、自定义组件简述

        开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

二、如何创建自定义组件

        1、创建一个放自定义组件集合的文件夹，

        2、创建自定义组件的文件夹

        3、鼠标右键自定义组件文件夹新建Component

三、如何引用

        1、在页面组件的配置文件中注册，配置文件为.json的文件

              ***图中“my-btn”为组件的名字随便写，后面跟的组件的路径***

{
  "usingComponents": {
    "my-btn":"../../components/mybtn/mybtn"
  }
}

         2、在页面.wxml文件中使用即可

<my-btn></my-btn>

 四、组件的样式设置

        组件的样式很简单，类比页面，在.wxml中写组件页面结构，在.wxss中写样式

        注意！！！：类名选择器必须使用class

wxml文件：

        我是mybtn组件

wxss文件：

 .btn{     background: red;    }

 五、组件的数据和方法

        自定义组件中.js文件，data字段是存放数组的，methods是写方法的，可类比vue学习，在data中写入数据可在wxml中渲染

        1、如何渲染数据

        .js文件 ：

  data: {

    title:"我是按钮"

  },

        .wxml文件 ：

{{title}}

        2、如何绑定方法 

        .wxml文件：

{{title}}

        .js文件：

  methods: {

    btnClick(){

      console.log("btnClick");

    }

  }

六、组件的对外开放属性 -- properties

        组件的对外属性，用来接收外界传递到组件中的数据,组件的 properties 和 data 的用法类似，它们都是可读可写的，只不过：

• data 更倾向于存储组件的私有数据

• properties 更倾向于存储外界传递到组件中的数据

properties属性不需要在自定义组件内部进行修改，是通过组件调用时传递进来的！！！

语法结构 

属性名称:{
    type：String，NUmber，【null不限制数据类型】
    value:""
}

 组件内定义

  properties: {
      color:{
        type:String,
        value:"red"//默认颜色
      }
  }

组件页面中使用

<button bindtap="btnClick" style="background:{{color}}">{{title}}</button>

 使用自定义组件传入对外开放属性

<my-btn color="pink"></my-btn>
/*此时button按钮就会变成粉色*/