微信小程序（5）

1.自定义组件

创建：

在项目的根目录中，鼠标右键，创建 components -> test 文件夹

在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component” 键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss

使用：

局部

 

 在需要使用组件的页面的.json文件中配置usingComponents，以键值对的方式配置组件

全局

和局部一样

组件和页面的区别：

从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。

但是，组件和页面的 .js 与 .json 文件有明显的不同：

组件的 .json 文件中需要声明 "component": true 属性

 

组件的 .js 文件中调用的是 Component() 函数

 

组件的事件处理函数需要定义到 methods 节点中

 组件的样式：

样式隔离：

组件 A 的样式不会影响组件 C 的样式

组件 A 的样式不会影响小程序页面的样式

小程序页面的样式不会影响组件 A 和 C 的样式 

注意：

app.wxss 中的全局样式对组件无效

只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响

如果希望在外界控制组件的样式：

styleIsolation的可选值：

 

properties属性：

用来接收外界传递到组件中的数据

 

 与Vue不同：

在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是可读可写的，只不过： data 更倾向于存储组件的私有数据

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

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

数据监听器：

纯数据字段：

不用于界面渲染的data字段可定义为纯数据字段

在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段

 

 

组件的生命周期

在lifetimes字段内声明

 比较重要的阶段：created，attached，detached

 

组件所在页面的生命周期

在pageLifeTimes中声明

 

插槽：

用于占位

 组件通信

父子之间：

属性绑定 用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据

父组件中定义属性，子组件用properties接收

事件绑定 用于子组件向父组件传递数据，可以传递任意数据

父组件定义一个函数，这个函数通过自定义事件的方式传给子组件

子组件通过this.triggerEvent将数据发给父组件

父组件通过e.detail接收发过来的参数

获取组件实例 父组件还可以通过 this.selectComponent() 获取子组件实例对象 这样就可以直接访问子组件的任意数据和方法

 

注意：this.selectComponent("id或class选择器") 

 

behaviors:用于实现组件间代码共享