【 微信小程序 】引用组件

全局引用组件

app.json配置

{
	"pages":[],
	"window":{},
	"usingComponents":{
    	"test":"/components/test/test"
  	},
}

xxx.wxml文件使用组件

<view>
    <test></test>>
</view>

局部引用组件

局部页面.json文件配置

{
  // 引入组件 键值对形式
  "usingComponents": {
    "test":"/components/test/test"
  }
}

xxx.wxml文件使用组件

<view>
    <test></test>>
</view>

组件样式

组件样式与外界样式是隔离的 互不影响
可以设置styleIsolation 取消隔离

// 组件.js文件
Component({
 	options:{
    	"styleIsolation":"isolated"
    }
})
// 组件.json文件
{
	"styleIsolation":"isolated"
}

选项值

默认启用样式隔离 样式互不影响
	"styleIsolation":"isolated"

页面影响组件 组件不影响页面
	"styleIsolation":"apply-shared"
	
页面影响组件 组件影响页面
	"styleIsolation":"shared"

数据监听器

监听数据变化

Component({
	observers:{
		"a,b":function(newA,newB){
			// coding
		}
	}
	data:{
		a:0,
		b:0
	}
})

监听对象变化

Component({
	// 使用通配符 监听所有的对象属性的变化
	observers:{
		"person.**":function(obj){
			// coding
		}
	},
	// 单独写对象属性
	observers:{
		"person.name,person.age":function(newA,newB){
			// coding
		}
	}
	data:{
		person:{
			name:"zwj",
			age:18
		}
	}
})

纯数据字段

提高页面的渲染效率
不用于界面渲染的 data 字段

Component({
	options:{
		// 设置一个正则表达式 表明以什么开始的字段为纯数据字段
		pureDataPattern:"/^_/"
	}
})

options选项

Component({
	options:{
		// 是否设置组件的隔离
		"styleIsolation":"isolated",
		// 设置一个正则表达式 表明以什么开始的字段为纯数据字段
		pureDataPattern:"/^_/",
		// 开启多个slot插槽
		multipleSlots:true
	}
})