1、基本知识
开发中常见的组件主要分为 公共组件 和 页面组件 两种，因此注册组件的方式也分为两种：
- 全局注册：在
app.json文件中配置usingComponents节点进行引用声明，注册后可在任意组件使用 - 局部注册：在
页面.json文件中配置usingComponents节点进行引用声明，只可在当前页面使用
在组件的 .js 中，需要调用 Component 方法创建自定义组件，Component 中有以下两个属性：
data数据：组件的内部数据methods方法：在组件中事件处理程序需要写到methods中才可以- 其他……
2、Properties属性
属性 Properties 是指组件的对外属性，主要用来接收组件使用者传递给组件内部的数据，和 data 一同用于组件的模板渲染
Component({
properties: {
// 如果需要接收传递的属性，有两种方式：全写、简写
label: String // 简写
label: {
// type 组件使用者传递的数据类型
// 数据类型：String、Number、Boolean、Object、Array
// 也可以设置为 null，表示不限制类型
type: String,
value: ''
},
// 文字显示位置
position: {
type: String,
value: 'right'
}
}
})
3、slot插槽
在使用基础组件时，可以给组件传递子节点传递内容，从而将内容展示到页面中，自定义组件也可以接收子节点内容
只不过在组件模板中需要定义 <slot /> 节点，用于承载组件引用时提供的子节点
默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。
同时需要给 slot 添加 name 来区分不同的 slot，给子节点内容添加 slot 属性来将节点插入到 对应的 slot 中
Component({
options: {
// 启用多 slot 支持
multipleSlots: true
}
})
<!-- 子组件 -->
<view>
<slot name="slot-top" />
<!-- slot 就是用来接收、承载子节点内容 -->
<!-- slot 只是一个占位符，子节点内容会将 slot 进行替换 -->
<!-- 默认插槽 -->
<view><slot /></view>
<slot name="slot-bottom" />
</view>
<custom01>
<text slot="slot-top">我需要显示到顶部</text>
<!-- 默认情况下，自定义组件的子节点内容不会进行展示 -->
<!-- 如果想内容进行展示，需要再组件模板中定义 slot 节点 -->
我是子节点内容
<text slot="slot-bottom">我需要显示到低部</text>
</custom01>
4、组件样式隔离
默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况：
app.wxss或页面. wxss中使用了标签名（view）选择器（或一些其他特殊选择器）来直接指定样式，这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。- 指定特殊的样式隔离选项
styleIsolation，支持以下取值： isolated表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；apply-shared表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；shared表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。
Component({
options: {
styleIsolation: 'isolated'
}
})
5、组件间通信
- 父往子传值：
Properties - 子往父传值：自定义事件、获取组件实例
5.1 自定义事件
- 自定义组件触发事件时，需要使用
triggerEvent方法发射一个自定义的事件 - 自定义组件标签上通过
bind方法监听发射的事件
子组件触发事件：
<!-- 在子组件中 -->
<button type="primary" plain bindtap="sendData">传递数据</button>
// 在子组件中
Component({
// 组件的初始数据
data: {
num: 666
},
// 组件的方法列表
methods: {
// 将数据传递给父组件
sendData () {
// 如果需要将数据传递给父组件
// 需要使用 triggerEvent 发射自定义事件
// 第二个参数，是携带的参数
this.triggerEvent('myevent', this.data.num)
}
}
})
父页面（组件）监听事件：
<!-- 在父页面（组件）中 -->
<view>{{ num }}</view>
<!-- 需要在自定义组件标签上通过 bind 方法绑定自定义事件，同时绑定事件处理函数 -->
<custom05 bind:myevent="getData" />
// 在父页面（组件）中
Page({
data: {
num: ''
},
getData (event) {
// 可以通过事件对象.detail 获取子组件传递给父组件的数据
// console.log(event)
this.setData({
num: event.detail
})
}
})
5.2 获取组件实例
可在父组件里调用 this.selectComponent() ，获取子组件的实例对象，就可以直接拿到子组件的任意数据和方法。
调用时需要传入一个匹配选择器 selector，如：this.selectComponent(".my-component")。