微信开发者工具

组件样式

组件样式隔离性

默认情况下，自定义组件的样式只对当前组件有效，不会影响组件之外的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字段
            })
        }
    }
})