1、开发组件三要素
properties //相当于vue中的props接收属性
triggerEvent //相当于vue中的$emit
slot //和vue是类似的slot
1.可以通过slot为自定义组件嵌入wxml结构
2.默认一个自定义组件只能嵌入一个slot，如果嵌入多个slot必须要开启options中的multipleSlots
例如：
Component({
options:{
multipleSlots: true, // 在组件定义时的选项中启用多slot支持
},
......
}）
3.用法：
第一步：在自定义组件内部添加slot
<slot name="插槽名称" />
例如：<slot name="before" />
第二步：在引入自定义组件的页面中内嵌wxml
<Dialog>
<view catchtap="play" slot="before">嵌入的第一个viewX</view>
<view slot="after">嵌入的第二个view</view>
</Dialog>
```
2、 自定义组件样式隔离问题 - 默认情况，自定义组件外部的样式不会污染到自定义组件内部的样式
- 设置样式隔离的方法：
1. 在组件的options中开启styleIsolation选项
Component({
options:{
styleIsolation: 'isolated'，//表示样式隔离，默认隔离
},
```
2. 通过外部样式类允许外部的某个类来影响自定义组件
```
1.在自定义组件js中添加允许哪个外部类的自定义属性
Component({
externalClasses: ['my-bg']
}）
2.在引入页面的子组件上添加外部样式类属性
<Dialog my-bg="bg"> </Dialog>
3. 在子组件内部添加对应的外部样式类名
<view class="my-bg">xxxx</view>
```
3、组件的生命周期
created:组件创建完成,但不能setData
attached：在组件实例进入页面节点树时执行
ready:在组件在视图层布局完成后执行
detached:在组件实例被从页面节点树移除时执行
```
Component({
//组件的生命周期
lifetimes:{
creaed() {},
attached() {},
},
//组件与页面相关的生命周期
pageLifetimes: {
show: function() {
// 页面被展示
},
hide: function() {
// 页面被隐藏
},
resize: function(size) {
// 页面尺寸变化
}
}
})
