小程序的组件化开发

目录：

1 小程序组件化思想

2 自定义组件的过程

3 组件样式实现细节

4 组件使用过程通信

5 组件插槽定义使用

6 Component构造器

在小程序里面需要创建组件的话需要在最外层建component包，然后在使用新建component来创建类似page的4个文件：

组件和页面的区别就是，组件文件会有额外显示是组件的标致：

js文件由component包裹

json文件里面会有

小程序的内置组件是可以直接使用的，但是上面创建的自定义组件是需要我们在使用组件的页面的json文件里面配置注册小程序的自定义组件名称以及路径：

如果某个自定义组件使用的地方很多，需要在很多页面json文件里面注册很麻烦，这时候我们可以在最外层的app.json文件里面注册这个自定义组件，注册的方法和上图一致。直接在app.json里面写

"usingComponents":{"xxx":"xxxxx"},

关于组件样式注意点：

1、在组件的css文件中不要使用id选择器、标签选择器、属性选择器，如果你使用了这些选择器，那么这个css样式会影响到其他组件的样式和页面的样式。

2、在组件中使用css样式建议使用class类选择器，此时的类选择器只会作用于组件自身，对使用该组件的页面不生效。

3、使用组件的页面的css样式的id选择器、属性选择器，class类选择器不会影响到组件的样式。但是标签选择器会影响到组件样式。

4、有时候确实有需求在页面的class类选择器能够作用于组件样式，那就需要在组件的js文件中写入下图的代码，把隔离的选项改变即可。

组件的通信包括：传递数据（properties），传递样式(externalClasses)，传递标签（插槽slot），传递自定义事件。

传递数据：

如果type的类型是null，那么就是不限制类型。子组件使用properties来接收父组件传递的参数。

传递样式：

不建议使用这个，组件该什么样式就定义好。传递方式需要在页面的wxss定义好类，然后传递给组件，组件在js文件中接受并在标签中使用该样式。