微信小程序的自定义组件

目录

一、组件的创建与引用 

二、样式 

三、数据、方法和属性 

四、数据监听器 

---

一、组件的创建与引用 

① 创建

1. 在项目的根目录中，鼠标右键，创建 components -> test 文件夹
2. 在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component”

② 引用 

类型	配置位置	代码
局部引用	页面的 .json
全局引用	app.json

二、样式 

① 组件样式隔离

• app.wxss 中的全局样式对组件无效
• 只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响

建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！

② 修改组件的样式隔离选项 

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。

但有时，我们希望在外界能够控制组件内部的样式 ，两种方法如下：

 styleIsolation 的可选值

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

三、数据、方法和属性 

component的内容	说明	代码图
data(数据)	用于组件模板渲染的私有数据
methods(方法)	事件处理函数和自定义方法
properties(属性)	用来接收外界传递到组件中的数据

data 和 properties 的区别 

data 数据和 properties 属性在本质上没有任何区别，只不过

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

四、数据监听器 

① 什么是数据监器

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

② 数据监听器的基本用法

③ 监听对象属性的变化