自定义组件
1.组件的创建与引用
1.创建组件
① 在项目的根目录中，鼠标右键，创建 components -> test 文件夹
② 在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component”
③ 为新建的组件命名之后，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss
2.引用组件
① 在需要引用组件的页面中，找到页面的 .json 配置文件，新增 usingComponents 节点
② 在 usingComponents 中，通过键值对的形式，注册组件；键为注册的组件名称，值为组件的相对引用路径
③ 在页面的 .wxml 文件中，把注册的组件名称，以标签形式在页面上使用，即可把组件展示到页面上
3.使用样式美化组件
组件对应 wxss 文件的样式，只对组件 wxml 内的节点生效。编写组件样式时，需要注意以下几点：
① 组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
② 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
③ 子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
④ 继承样式，如 font 、 color ，会从组件外继承到组件内。
⑤ 除继承样式外， app.wxss 中的样式、组件所在页面的样式对自定义组件无效。
2.组件的data与methods
1.使用data定义组件的私有属性
页面的data定义在Page()函数中
组件的data定义在component()函数中
在组件的.js中：
如果要访问data中的属性，直接使用this.data.数据名称 即可
弱国要为data中的数据重新赋值，调用 this.setData( { 数据名称:新值 } ) 即可
在组件的.wxml中：
如果要渲染data中的数据，直接使用 {{ 数据名称 }} 即可
2.使用methods定义组件的事件处理函数
组件的事件处理函数，必须定义在method节点中。
3.组件的properties
（1）properties 的作用
类似于vue组件中的props，小程序组件中的properties，是组件的对外属性，用来接收外界传递到组件中的数据。
在小程序中，properties 和data的用法类似，他们都是可读可写的。不过：
data 更倾向于存储组件的私有数据
properties 更倾向于存储外界传递到组件中的数据
（2）声明properties的两种方法
（3）为组件传递properties的值
可以使用数据绑定的形式，向子组件的属性传递动态数据。
在定义 properties 时，属性名采用驼峰写法（properCount）；
在 wxml 中，指定属性值时，则对应使用连 字符写法（proper-count=“attr value”）；
应用于数据绑定时，采用驼峰写法（attr="{{properCount}}"）。
例：引用组件的页面模板
.wxml:
.js:
（4）在组件内修改properties的值
properties 的值是可读可写的，它的用法与 data 几乎一致，因此可以通过 setData 修改 properties 中任 何属性的值
properties:{
count:Number
},
methods:{
add:function() {
this.setData( { count:this.properties.count + 1 } )
}
}
4.数据监听器
数据监听器可以用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。作用类似于 vue 中的 watch。
数据监听器从小程序基础库版本 2.6.1 开始支持。
1.监听子数据字段的变化：
键：就是需要被监听的数据，值：就是数据变化之后会触发的事件函数
左侧可以监听单个数据，也可以监听多个数据，监听多个数据时，每个字段之间用英文逗号隔开，只要其中一个字段变化，就会触发值对应的事件函数。
2.使用通配符 ** 监听所有子数据字段的变化
5.组件的生命周期
1.组件的主要生命周期：
组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的是今典遇到一些特殊的框架事件时被自动触发。
其中，最重要的生命周期是 created, attached, detached ，包含一个组件实例生命流程的最主要时间点。
created：组件实例刚刚被创建好时被触发。此时还不能调用setData。一般这个生命周期只应该用于给组件this添加一些自定义属性字段。
attached：在组件完全初始化完毕，进入页面节点数后，attached生命周期被触发。绝大多数初始化工作都可以在这个时机进行。
detached：在组件离开页面节点数后被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。
2.组件可用的全部生命周期函数
3.定义生命周期函数
生命周期方法可以直接定义在 Component 构造器的第一级参数中。
自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。
4.组件的生命周期：
有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称 为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。其中可用的生命周期包括：
例：
Component({
pageLifetimes: {
show() { // 页面被展示
},
hide() { // 页面被隐藏
},
resize(size) { // 页面尺寸变化
}
}
})
6.组件插槽
1.默认插槽
在组件的 wxml 中可以包含 slot 节点，用于承载组件使用者提供的 wxml 结构。
默认情况下，一个组件的 wxml 中只能有一个slot。需要使用多 slot 时，可以在组件 js 中声明启用。
小程序中目前只有默认插槽和多个插槽，暂不支持作用域插槽。
例：
<!-- 组件模板 --> <view class="wrapper"> <view>这里是组件的内部节点</view> <slot></slot> </view>
<!-- 引用组件的页面模板 --> <view> <component-tag-name> <!-- 这部分内容将被放置在组件 <slot> 的位置上 --> <view>这里是插入到组件slot中的内容</view> </component-tag-name> </view>
2.启用多个插槽
在组件中，需要使用多个slot时，可以在组件js中声明启用：
Component({
options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: { /* ... */ },
methods: { /* ... */ }
})
3.定义多个插槽
可以在组件的 wxml 中使用多个 slot 标签，以不同的 name 来区分不同的插槽。
<!-- 组件模板 --> <view class="wrapper"> <slot name="before"></slot> <view>这里是组件的内部细节</view> <slot name="after"></slot> </view>
4.使用多个插槽
使用时，用 slot 属性来将节点插入到不同的 slot 中。
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 --> <view slot="before">这里是插入到组件slot name="before"中的内容</view> <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 --> <view slot="after">这里是插入到组件slot name="after"中的内容</view>
</component-tag-name>
</view>
7. 组件中的通信
1.组件之间的三种基本通信方式：
① WXML 数据绑定：用于父组件向子组件的指定属性传递数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9 开始，还 可以在数据中包含函数）。
② 事件：用于子组件向父组件传递数据，可以传递任意数据。
③ 如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以 直接访问组件的任意数据和方法。
2. this.selectComponent(string)
在小程序的组件中，调用 this.selectComponent(string)，可以返回指定组件的实例对象。
<!-- wxml -->
<component-a class="customA" id= "cA" ></component-a>
<!--父组件的 .js 文件中，可以调用 selectComponent 函数并指定 id 或 class 选择器，获取子组件对象-->
Page({
onLoad(){
// 切记下面参数不能传递标签选择器（component-a），不然返回的是 null
var component = this.selectComponent(‘.customA‘); // 也可以传递 id 选择器 #cA
console.log(component);
}
})
3.通过事件监听实现子向父传值
事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。
通过事件监听实现子组件向父组件传值的步骤：
① 在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
② 在父组件的 wxml 中，通过自定义事件的形式，将步骤一中定义的函数引用，传递给子组件
③ 在子组件的 js 中，通过调用 this.triggerEvent(‘自定义事件名称‘, { /* 参数对象 */ }) ，将数据发送到父组件
④ 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据
原文：https://www.cnblogs.com/mdr86553/p/11959756.html