1、组件注册——usingComponents

（1）全局注册：在app.json文件中配置 usingComponents进行注册，注册后可以在任意页面使用。
（2）局部注册，在页面的json文件中配置suingComponents进行注册，注册后只能子啊当前页面使用。

 "usingComponents": {"custom-checkbox": "./components/custom-checkbox/custom-checkbox"}

2、properties——接收传递进来的属性，类似vue的props

接收：

  properties: {label: {//数据的类型只能是String、Array、Number、Boolean、Object//也可以为null,表示不限制类型type: String,value: ''}},

访问：

this.properties.label

修改：

this.setData({label:"在组件内部修改 Properties中的数据"
})

在JS中可以访问和获取properties中的数据，但是一般不建议修改，会造成数据流的混乱。

3、wxml 自定义组件插槽——slot（同vue 的插槽一样）

• 默认插槽：
• 具名插槽：

组件A
<view>
<slot name="slot-right">
</view>
组件B
<text slot="slot-right">具名插槽<text>

在自定义组件的js文件开启支持多slot：

Component({options: {multipleSlots: true},})

4、自定义组件的样式和注意事项

1. 在自定义的wxss文件中，不允许使用标签选择器、ID 选择器、属性选择器。请使用class类选择器。
2. 子选择器（.a>.b）只能用于view 和子组件，用于其他组件（标签）可能会导致样式失效。
3. 继承样式，例如：color、font 等都会从组件外继承。
4. （除继承样式外）全局样式、组件所在页面的样式文件中的样式都对自定义组件 无效。
5. 官方不推荐做法： 不建议全局样式文件 、父级页面之间使用标签选择器设置样式。
6. 组件和组件使用者如果使用了后代选择器（.a .b），可能会出现一些非预期情况

5、组件样式隔离——stylelsolation

stylelsolation：用于配置样式隔离选项。主要有三个属性值

• isolated ：表示样式隔离，在自定义组件内外，使用了相同class属性的样式不会相互影响。默认值。
• apply-shared：组件的使用者、页面的wxss样式可以影响自定义组件中的样式，但是自定义组件不会影响到外部组件使用者、页面的wxss设置的样式。
• shared：组件的使用者、页面的wxss和自定义组件中的样式可以相互影响，甚至还可以影响到其他使用了 “apply-shared”、"shared"属性的自定义组件。

配置：在自定义组件的js文件中

Component({options: {// styleIsolation: 'isolated'// styleIsolation: 'apply-shared'styleIsolation: 'shared'},})

**注意：**自定义组件中不可以直接修改默认组件的样式，比如修改复选框的样式。如果想要修改需要 stylelsolation：“shared”；但是shared属性还会修改其他页面的样式、组件使用者的样式、以及其他使用了“apply-shared”\“shared”属性的自定义组件的样式。此时可以给可以使想要受影响的组件单独添加一个命名空间（类名）

6、自定义组件的数据监听器——observers（类似于vue->watch）

  //用于监听数据属性是否发生了变化observers:{//key：需要监听的数据//value:就是一个回调函数，形参：最新的数据num: function (newNum) {},//同时监听多个数据使用字符串，用逗号分隔"num，count": function (newNun, NewCount) {},//支持监听属性，以及内部数据的变化，使用数据路径"obj.name": function (newName) {},"arr[1]": function (newItem) {console.log(newItem)},//监听所有属性的变化使用通配符：**"obj.**": function (newObj) {console.log(newObj)}}

7、组件通信——父子组件传值

• 父组件往子组件传值：
  （1）父组件wxml中使用数据绑定方式向子组件传递动态数据。
  （2）子组件通过properties接收父组件传递的数据。（如果需要将properties中的数据赋值给data中的数据，通过observers实现）
• 子组件向父组件传值：
  （1）自定义组件内部使用triggerEvent方法发射一个自定义事件，同时可以携带数据。（类似于 $emit）

this.triggerEvent('myevent',this.data.num)

（2）在父组件的自定义组件标签上通过ind方法监听发射的事件，同时绑定事件的处理函数，在事件的处理函数中通过对象获取到传递的数据。

<custom bind:myevent='getData'></custom>getData(event){
//event。detail 获取子组件传递给父组件的数据
console.log(event) 
}

8、获取组件实例——selectComponent

this.selectComponent

  //获取子组件对象，参数为class选择器或者id选择器。const res = this.selectComponent(".child");console.log(res.data.num)

9、自定义组件的生命周期

10、自定义组件所在页面的生命周期