微信小程序--16（自定义组件1）

一、组件创建

1. 在项目的根目录中，鼠标右键，创建components-->test文件夹。
2. 在新建的components-->test文件夹上，点击鼠标右键，新建components。
3. 键入组价的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为.js,.json,.wxml,.wxss。

二、组件引用

（一）局部引用

组件只能在当前被引用的页面内使用

在页面.json配置文件中引用组件的方式，叫做局部引用

（二）全局引用

组件可以在每个小程序页面使用

（三）全局引用VS局部引用

根据组件的使用频率和范围，来选择合适的引用方式，如果组件在多个页面当中被经常用到，建议进行”全局引用“，反之如果某个组件只在某个页面中被引用，建议进行”局部引用“。

（四）组件和页面的区别

它们都是由四个文件组成，但是

• 组件的.json文件中需要声明"component":true属性
• 组件的.js文件中调用的是Component()函数
• 组件的事件处理函数需要定义到methods节点中

三、组件样式

（一）默认情况下，自定义组件的样式只对于当前组件生效，不会影响到组件之外的UI结构，是相互隔离的。

优势;

• 可以防止外界的样式影响组件内部的样式
• 防止组件的样式破坏外界的样式

注意：

• app.wxss中的全局样式对组件无效
• 只有class选择器会有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响
• 建议大家都使用class选择器，防止样式冲突的产生

（二）修改组件样式的隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题，但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过stylesolation修改组件的样式隔离选项，用法如下：

可选值	默认值	描述
isolated	是	表示启用样式隔离，在自定义组件内外，使用class指定的样式将不会互相影响
apply-shared	否	表示页面wxss样式将影响到自定义组件，但是自定义组件wxss中指定的样式不会影响页面
shared	否	表示页面wxss样式将影响到自定义组件，自定义组件wxss中指定的样式也会影响页面和其他设置apply-shared或shared的自定义组件

四、数据、方法、属性

（一）data数据

在小程序组件中，用于组件模板渲染和私有数据，需要定义到data节点中。

（二）methods方法

在小程序中，事件处理函数和自定义方法需要定义到methods节点中：

（三）properties属性

在小程序组件中，properties是组件的对外属性，用来接收外界传递到组件中的数据

（四）data和properties的区别

在小程序组件中，两者用法相同，都是可读可写的，但是data更倾向于存储组件的私有数据

properties更倾向于存储外界传递到组件中的数据

（五）使用setData修改properties的值

由于data数据和properties属性在本质上没有任何区别，因此properties属性的值也可以用于页面渲染，或使用setData为properties中的属性重新赋值