小程序组件

组件

组件引用

局部引用组件

// 在页面的 .json文件 引入组件

{
	"usingComponents": {
		// 引入组件的命名 - 组件的路径
		"my-test1": "/components/test1/test1"
	}
}

<!-- 在wxml中，使用组件 -->
<my-test1></my-test1>

全局引用组件

// 在 app.json文件 引入组件

{
	"pages": [...],
	"window": {...}
	"usingComponents": {
		// 引入组件的命名 - 组件的路径
		"my-test2": "/components/test2/test2"
	}
}

<!-- 在wxml中，使用组件 -->
<my-test2></my-test2>

组件的区别

组件与页面都是由.js，.json，.wxml，.wxss四个文件组成

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

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

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

组件配置项

methods

组件内的事件处理函数和自定义方法需要定义到methods节点下

Component({
  methods：{  				// 组件的方法列表(包含事件处理函数和自定义方法)
  	addCount() {			// 事件处理方法
    	this.setData({ count: this.data.count + 1 })
    	this._showCount()	// 通过this直接调用自定义方法
  	},
 	_showCount() {			// 自定义方法建议以_开头
   		wx.showToast({
     	title: 'count的值为' + this.data.count,
      	icon: 'none'
    	})
 	}
  }
})

properties

Component({
	properties: {
	  	max:{				// 完整定义属性的方式(当需要指定属性默认值时)
  	  		type: Number,	// 属性值的数据类型
   			value:10		// 属性默认值
 	 	},
 	 	max:Number			// 简化定义属性的方式(不需要指定属性默认值时)
 	}
})

<my-test1 max="10"></my-test1>

注：

在小程序的组件中properties属性和data数据的用法相同，它们都是可读可写的，且指向同一个对象(data===properties)

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

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

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

或使用setData为properties中的属性重新赋值

observers

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作

Component({
	observers: {
		'属性A, 属性B': function(属性A的新值, 属性B的新值){
			// code
		}
	}
})

数据监听器支持监听对象中单个或多个属性的变化

Component({
	observers: {
		'对象.属性A, 对象.属性B': function(属性A的新值, 属性B的新值){
			// code
			// 触发此监听器的情况
			// 使用setData设置对象.属性A或对象.属性B时触发
			// 使用setData设置对象时触发
		}
	}
})

纯数据

纯数据字段是指那些不用于界面渲染的data字段

当某些data中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用

这种特性的data字段比较适合设置为纯数据字段，纯数据字段可以提升页面更新的性能

在Component构造器的options节点下，指定pureDataPattern为一个正则表达式，

字段名符合这个正则表达式的字段将变成纯数据字段

Component({
	options: {
		// 指定所有 _ 开头的数据字段为纯数据字段
		pureDataPattern: /^_/
	},
	data: {
		a: true,	// 普通数据字段
		_b: false	// 纯数据字段
	}
})

组件样式

组件的样式隔离

默认情况下，自定义组件的样式只会对当前组件生效，不会影响到组件之外的UI结构

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

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

注：

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

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

组件的隔离选项

自定义组件的样式隔离特性能防止组件内外样式互相干扰的问题

但也可以通过styleIsolation修改组件的样式隔离选项

// 在组件的 .js文件中新增如下配置

Component({
	styleIsolation: 'isolated'
})

或

// 组件的 .json文件下新增配置

{
	"styleIsolation": "isolated"
}

配置项

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