【微信小程序】自定义组件(一)

🎁

写在前面：

观众老爷们好呀，这里是

前端小刘不怕牛牛

频道，小程序系列文章又更新了呀。

今天牛牛带来的是微信小程序的自定义组件入门知识，赶紧拿起小本本做笔记呀！

一，创建和引用

自定义组件，就是开发者将页面的某个功能模块抽象化并提取出来的代码块，支持复用，减少一定的代码量。

有了自定义组件，我们就可以将页面复杂的模块分解成几个低耦合的模块。低耦合就是说模块间的关联程度低，避免了过度依赖，利于代码维护等等。当多个页面需要一样的功能模块时，我们还可以封装一个自定义组件，只需要在各页面使用该组件即可。这样代码量是不是一下子减少好多，相当的nice。

自定义组件的创建，类似于页面的创建，也是由
json
、
wxml
、
wxss
、
js
四个类型的文件组成

创建有以下两个步骤：

在项目的根目录下，创建一个
components
文件夹，用来存放我们的自定义组件代码

伙伴们是不是觉得跟
Vue
的组件定义有点像，不过注意的是，
vue
定义组件只需要
vue
一个文件即可，而小程序的自定义组件一般来说可不止。
在
components
文件夹下创建一个自定义组件名字的空文件夹，鼠标移至新文件夹上方并右键，再次输入名字，按下回车，开发者工具就会帮你自动生成需要的四个类型的文件

一个最简单的自定义组件我们就创建完成啦。

注意：

自定义组件文件夹下需要在
json
文件中将
component
设置为
true
，完成自定义组件声明才可使用。

{
	"component" : true
}

当然，在上面使用的快捷创建自定义组件中，开发者工具已经默认帮你把这一段写好了。

我们先来讲讲它的引用，自定义组件的引用也分为全局引用和局部引用，区别和用法如下。

局部引用：

顾名思义，该组件只有在当前被引用的页面内使用，设置方式即在页面的
json
配置文件中配置
usingComponents
字段设置一个键值对，
key
为自定义组件名字，
value
则是组件定义的路径。需要注意的是，
key
的值就是该组件的标签名，如
<test/>
，示例如下所示。
```
{
	"usingComponents" : {
		"test" : '/components/test/test'
	}
}
```
这时候我们就可以在页面的
wxml
文件中使用组件啦

因为
WXML
节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
全局引用：

就是该组件在所有小程序页面都可以被使用，设置方式差不多，我们直接在
app.json
全局配置文件中对
usingComponents
字段设置组件的键值对，与上述一致。
```
"usingComponents" : {
	"test" : '/components/test/test'
}
```
tip：

该字段与
window
同级

如何选择：

当一个组件在需要在多个页面中使用，我们建议使用全局引用，而对于不常用的组件，只在特定页面使用，我们就用局部引用。

我们来简单了解一下各文件的作用

组件模板中可以提供一个
<slot>
节点，作为插入标识位置，这时候当我们的页面引用组件的时候，可以提供一个子节点，插入到
<slot>
中，示例如下：

页面

在这里插入图片描述

当你有多个
slot
节点插入时，需要对
slot
用
name
进行区分

<slot name='a'></slot>
<!-- 页面-->
<test>
	<view slot='a'></view>
</test>

注意：

组件样式特性：

组件样式隔离，对于组件内部设定的样式，不对会组件外部的UI结构造成任何影响，而同理，组件外部的样式也不会对组件内部有影响，除了上文提到
font
、
colco
的样式继承。
需要注意的是，组件样式隔离只对
class
选择器有作用，对其他选择器，没有作用。

修改组件样式隔离选项：

今天的小程序文章到这里就结束啦，如果觉得对您有帮助的话，可以关注牛牛接下来的文章

感谢您的支持，您的支持是我们创作的最大动力！！！

最后祝小伙伴们中秋节快乐呀！！！

债见~~