一.自定义组件

1.创建组件

①在项目的根目录中&＃xff0c;鼠标右键&＃xff0c;创建 components -> test 文件夹

②在新建的 components -> test 文件夹上&＃xff0c;鼠标右键&＃xff0c;点击"新建 Component "

③键入组件的名称之后回车&＃xff0c;会自动生成组件对应的4个文件&＃xff0c;后缀名分别为 js , json ,. wxml 和&＃xff0e; wxss

注意&＃xff0c;为了保证目录结构的清晰&＃xff0c;建议把不同的组件存放到单独目录中&＃xff0c;例如&＃xff1a;

2.引用组件

组件的引用方式分为"局部引用"和"全局引用"&＃xff0c;顾名思义&＃xff1a;

&＃xff0e;局部引用&＃xff1a;组件只能在当前被引用的页面内使用

&＃xff0e;全局引用&＃xff1a;组件可以在每个小程序页面中使用

3&＃xff0e;局部引用组件

在页面的 json 配置文件中引用组件的方式&＃xff0c;叫做"局部引用"。示例代码如下&＃xff1a;

显示效果如下&＃xff1a;

4.全局引用组件

在app。json全局配置文件中引用组件的方式&＃xff0c;叫做“全局引用”&＃xff0c;示例代码如下

5&＃xff0e;全局引用 VS 局部引用

根据组件的使用频率和范围&＃xff0c;来选择合适的引用方式&＃xff1a;

&＃xff0e;如果某组件在多个页面中经常被用到&＃xff0c;建议进行"全局引用"

&＃xff0e;如果某组件只在特定的页面中被用到&＃xff0c;建议进行"局部引用"

6&＃xff0e;组件和页面的区别

从表面来看&＃xff0c;组件和页面都是由 js 、 json 、. wxml 和. wxss 这四个文件组成的。但是&＃xff0c;组件和页面的 js 与 json 文件有明显的不同&＃xff1a;

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

.组件的 js 文件中调用的是 Component (&＃xff09;函数

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

二.样式

1.组件样式隔离

默认情况下&＃xff0c;自定义组件的样式只对当前组件生效&＃xff0c;不会影响到组件之外的 UI 结构&＃xff0c;如图所示&＃xff1a;

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

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

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

好处:

防止外界的样式影响组件内部的样式

防止组件的样式破坏外界的样式

2.组件样式隔离的注意点

&＃x1f4cc;.app.wxss中的全局样式对组件无效

&＃x1f4cc;.只有 class 选择器会有样式隔离效果&＃xff0c; id 选择器、属性选择器、标签选择器不受样式隔离的影响

例如&＃xff1a;在app.json中写入时&＃xff1a;

标签选择器会改变样式。

建议&＃xff1a;

在组件和引用组件的页面中建议使用 class 选择器&＃xff0c;不要使用 id 、属性、标签选择器&＃xff01;

3&＃xff0e;修改组件的样式隔离选项

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

4.stylesolation的可选值

三.数据&＃xff0c;方法和属性

1.data数据

在小程序组件中&＃xff0c;用于组件模板渲染的私有数据&＃xff0c;需要定义到data节点中&＃xff0c;示例如下&＃xff1a;

2.methods方法

在小程序组件中&＃xff0c;事件处理函数和自定义方法需要定义到methods节点中&＃xff0c;示例代码如下&＃xff1a;

3.properties属性

在小程序组件中&＃xff0c;properties是组件的对外属性&＃xff0c;用来接收外界传递到组件中的数据&＃xff0c;示例代码如下&＃xff1a;

页面.wxml中写入&＃xff1a;

当我们判断当按钮按倒9的时候还能否自增的话&＃xff0c;需要if进行判断。

4.data和 properties 的区别

在小程序的组件中&＃xff0c; properties 属性和 data 数据的用法相同&＃xff0c;它们都是可读可写的&＃xff0c;只不过&＃xff1a;

. data 更倾向于存储组件的私有数据

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

二者指向同一个

5&＃xff0e;使用 setData 修改 properties 的值

由于 data 数据和 properties 属性在本质上没有任何区别&＃xff0c;因此 properties 属性的值也可以用于页面渲染&＃xff0c;或使用 setData 为 properties 中的属性重新赋值&＃xff0c;示例代码如下&＃xff1a;

四.数据监听器

1.什么是数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化&＃xff0c;从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中&＃xff0c;数据监听器的基本语法格式如下&＃xff1a;

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

组件的UI结构如下&＃xff1a;

{{n1}} &＃43; {{n2}} &＃61; {{sum}}
n1&＃43;1
n2&＃43;1

组件的js文件代码&＃xff1a;

实例效果&＃xff1a;

data: {n1: 0,n2: 0,sum: 0},
methods: {addN1(){this.setData({n1: this.data.n1 &＃43;1})},addN2(){this.setData({n2: this.data.n2 &＃43;1})},},observers:{&＃39;n1,n2&＃39; : function (newN1,newN2) {this.setData({sum : newN1 &＃43; newN2})}}

界面效果如下&＃xff1a;

3.监听对象属性的变化

数据监听器支持监听对象中单个或多个属性的变化&＃xff0c;实例语法如下&＃xff1a;