微信小程序自定义组件的关键记录

我们在往常用vue或者是react编程的时候，最常用最常见的一个词就是组件，在小程序开发中，组件也是很nice的，毕竟谁也不想把1+1 = 2每一个页面写一遍。本篇文章适合知道小程序基本开发的手足，总结一些自己在开发小程序组件的过程需要注意的点，有写的不对的地方还请指指教。

1. 基本配置

新建组件就跟新建页面一样，还是js、json、wxml、wxss四个文件，这里需要注意的有四点。

一、或许很多人在新建组件的时候

右键直接新建page，这样就会在app.json的配置文件中的pages下面，根据路径多加一项，需要注意的是，这一项不像是页面，删掉也没关系。

二、新建组件之后

需要在组件的配置文件json中添加component: true字段； 需要在引用组件的配置文件中添加usingComponents字段来定义组件的名字和路径【可以直接用/+app.json中自动生成的，以免路径找不到】

三、新建的组件

如果是直接一键生成的，那么这个时候js文件中的还是page({...生命周期等执行函数})，所以这个时候需要我们把这些换成组件需要的component({...组件需要的对象})

2.组件样式

关于样式，就是我们的css了，至于里面的slot，无非就是一个插槽，而模版文件中数据绑定等我们都可以按照页面中的来实现，需要注意的是选择器和样式污染问题

一、选择器

在编写组件的时候，不能使用id选择器(#a)、属性选择器（[a]）和标签名选择器，建议统一使用class 子选择器只能用于view组件，和其子节点之间，其余的不建议使用 比如text > text 继承样式的话 font还有color这种样式继承，会从组件外继承到组件内部 除继承样式之外，app.wxss中的样式，组件所在页面的样式对组件内部是无效的

其实呢，我们只用class选择器就好了。。。

二、外部样式定义

组件定义好了之后，在使用的时候，如果我忽然在调用页面加一个class控制样式，想加一个class怎么办呢？ 在组件内部的js文件中配置externalClasses：['xxx']，这样在外部引用的时候，可以直接使用这里定义的，毕竟单节点上面，同一节点同时使用普通样式和外部样式的时候，优先级会出现错乱，所以这能很好的避免这种情况 我们前面说了，自定义组件内部样式，是不会受到外部样式的影响的，除非是全局的标签或者是options配置中添加assGlobalClass字段

三、样式配置

3.component构造器 其实这里的构造器都是制定组件重的属性、数据、方法等等，定义的字段可以参考官方文档，我这里不多做累述，把容易混淆的点拿出来对比一下。

properties: 组件的对外属性 data: 组件的内部数据 组件生命周期：生命周期有优先级，一般情况下直接当作普通方法，但是如果需要优先级的时候，可以写到lifetimes对象里面

组件生命周期：

4.组件事件

组件的事件，我们和vue差不多的写法，会有一个methods统一来管理。但是我们通常有两种类型

1. 组件内部调用的方法。

和普通一样就好了，无非就是完全在组件内部自己玩，不和外部页面进行数据通信，请求也是自己完成
复制代码

2. 和父组件或者页面有数据通信的方法。

我们在vue中需要使用到自组件向父组件传递消息，有一种方法就是this.$emit('...', msg)
但是我们在小程序中也需要这种场景 【监听事件】：组件间通信的主要方式之一
复制代码

组件内部

// wxml
        <view bindtap="onHandle"></view>
        // js
        methods: {
            onHandle() {
                .....
                this.triggerEvent('eventName', detailMsg)
            }
    }

复制代码