（四）小程序-基础加强

一、自定义组件

1.1组件的创建与引用

1.创建组件

2.引用组件
分为局部引用和全局引用

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

4.全局引用组件
在app.json全局配置文件中引用组件的方式，叫做“全局引用”

5.组件和页面的区别
组件和页面的.js与.json文件有明显的不同

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

1.2样式

1.样式组件隔离

好处：
（1）防止外界的样式影响组件内部的样式
（2）防止组件的样式破坏外界的样式
2.组件样式隔离的注意点

• app.wxss中的全局样式对组件无效
• 只有class选择器会有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响
  建议：在组件和引用组件的页面中建议使用class选择器，不要用id选择器、属性选择器、标签选择器

3.修改组件的样式隔离选项
默认，自定义组件的样式隔离性能防止组件内外样式相互干扰的问题。但有时，我们希望外界能控制组件内部的样式，此时，可以通过stylesolation修改组件的样式隔离选项。

4.stylelsolation的可选值

1.3数据、方法和属性

1.data数据
用于组件模板渲染的私有数据，需要定义到data节点中

2.methods方法

3.properties属性
是组件的对外属性，用来接收外界传递到数组中的数据

4.data和properties的区别


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

1.4数据监听器

1.什么是数据监听器
数据监听器用于==监听和响应任何属性和数据字段的变化，从而执行特定的操作。==它的作用类似于vue中的watch侦听器。

2.数据监听器的基本使用


3.监听对象属性的变化

1.5纯数据字段

1.概念：纯数据字段指的是那些不用于界面渲染的data字段。
应用场景：某些data中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的data字段适合被设置为纯数据。
好处：纯数据字段有助于提升页面更新的性能
2.使用规则：
在Component构造器的options节点中，指定pureDataPattern为一个正则表达式，字段名符合这个正则表达式的字段为纯数据字段

1.6组件的声明周期

1.组件全部的生命周期函数

2.组件主要的生命周期函数
最重要的生命周期函数有3个，分别是created,attached,detached.它们各自的特点：

3.lifetimes节点
生命周期函数的定义

1.7组件所在页面的生命周期

1.什么是组件所在页面的生命周期
自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。
组件所在页面的生命周期有如下3个：

2.pageLiftimes节点
组件所在页面的生命周期函数，需要定义在pageLiftimes节点中

1.8插槽

1.什么是插槽
在自定义组件的wxml结构中，可以通过一个<slot>节点（插槽），用于承载组件使用者提供的wxml结构。

2.单个插槽
在小程序中，默认每个自定义组件中只允许使用一个<slot>进行占位，这种个数上的限制叫做单个插槽。

3.启用多个插槽
在小程序的自定义组件中，需要使用多个slot插槽的时，可以在.js文件中，通过下面方式启用：

4.定义多个插槽

1.9父子组件之间的通信

1.父子组件之间通信的3种方式

（1）属性绑定
用于父组件向子组件的指定属性