组件样式
组件样式隔离性
默认情况下,自定义组件的样式只对当前组件有效,不会影响组件之外的UI结构
好处 防止外界的样式影响组件内部的样式
防止组件的样式破坏外界的
组件样式隔离的注意点
app.wxss
中全局样式对组件无效
只有class
选择器才有样式隔离效果,id
选择器,属性选择器、标签选择器不受样式隔离的影响
建议:在组件和引用组件的页面中建议使用class选择器,不要使用id.属性.标签选择器
修改组件样式隔离选项
默认情况下,自定义的样式隔离特性,能够防止组件内外样式互相干扰的问题。 但有时,我们希望在外界能够控制组件内部的样式,此时,可以通过 styleIsolation
修改组件的样式隔离选项
// 组件的 .js 文件中新增如下配置
Component({
options:{
styleIsolation:'isolated'
}
})
// 或在组件的.json文件中新增如下配置
{
"styleIsolation":"isolated"
}
数据监听器
数据监听器用于监听和响应任何属性和数据的变化,从而执行的操作。它的作用类似于vue 中的 watch
// 组件的JS中
Component({
// 数据监听器
observers:{
'字段X':function(字段X新值){ // 监听单个
// 逻辑功能处理
},
'字段A,字段B':function(字段A新值,字段B新值){ // 监听多个
// 逻辑功能处理
},
'对象.属性':function(属性新值){ // 监听对象某个属性变化
// 逻辑功能处理
},
'对象.**':function(属性新值){ // 监听对象所有属性变化
// 逻辑功能处理
},
'**': function() { //每次 setData 都触发
// 逻辑功能处理
},
}
})
组件中定义
<!--组件wxml中-->
<view>
{{num1}} + {{ num2 }} = {{ sum }}
</view>
<button type="warn" bindtap="addNum1">Num + 1</button>
<button type="warn" bindtap="addNum2">Num + 2</button>
定义data数据
// 组件的JS中
Component({
// 组件初始数据
data:{
num1:0,
num2:0,
sum:0
},
// 组件方法列表
methods:{
addNum1(){
this.setData({
num1:this.data.num1+1
})
},
addNum2(){
this.setData({
num2:this.data.num2+1
})
}
}
})
监听num1与num2变化
// 组件的JS中
Component({
...,
// 数据侦听器
observers:{
'num1,num2':function(newNum1,newNum2){
this.setData({
sum:newNum1+newNum2
})
}
}
})
数据监听器支持同时监听对象中多个属性变化
Component({
// 组件的初始数据
data:{
obj:{
name:'tome'
}
},
// 数据侦听器
observers:{
// 监听obj里面的name字段变化
'obj.name':function(newName){
console.log(newName)
}
},
// 方法列表
methods:{
changeObj(){
this.setData({
'obj.name':'jerry' // 修改obj里面的name字段
})
}
}
})