网站建设名词解析,知名的公关公司,网络营销案例分析,WordPress多用户商城插件自定义组件 组件的创建与引用1、创建组件2、引用组件3、全局引用VS局部引用4、组件和页面的区别 样式1、组件样式隔离2、组件样式隔离的注意点3、stylelsolation的可选值 数据、方法和属性1、data数据2、methods方法3、properties4、data和properties区别5、使用setData修改pr… 自定义组件 组件的创建与引用1、创建组件2、引用组件3、全局引用VS局部引用4、组件和页面的区别 样式1、组件样式隔离2、组件样式隔离的注意点3、stylelsolation的可选值 数据、方法和属性1、data数据2、methods方法3、properties4、data和properties区别5、使用setData修改properties的值 数据监听器1、什么是数据监听器2、监听对象属性的变化 组件的创建与引用
1、创建组件 在项目的根目录中鼠标右键创建 components - test文件夹 在新建的components - test文件夹上鼠标右键点击新建Component 键入组件的名称之后回车会自动生成组件对应的4个文件后缀名分别为js, json, .wxml 和.Wxss
注意:为了保证目录结构的清晰建议把不同的组件存放到单独目录中
2、引用组件
局部引用 组件只能在当前被引用的页面内使用 在页面的json配置文件中引用组件的方式,叫做“局部引用
全局引用 组件可以在每个小程序页面中使用 在app.json全局配置文件中引用组件的方式叫做“全局引用”
3、全局引用VS局部引用
根据组件的使用频率和范围来选择合适的引用方式: ️如果某组件在多个页面中经常被用到建议进行“全局引用” ️️如果某组件只在特定的页面中被用到建议进行“局部引用”
4、组件和页面的区别
从表面来看组件和页面都是由js、.json. .wxml 和.WXSS这四个文件组成的。但是,组件和页面的.js与json文件有明显的不同:
组件的 json文件中需要声明component: true属性 组件的 js文件中调用的是Component()函数 组件的事件处理函数需要定义到methods节点中
样式
1、组件样式隔离
默认情况下自定义组件的样式只对当前组件生效不会影响到组件之外的UI结构
2、组件样式隔离的注意点 app.wxss 中的全局样式对组件无效 只有 class选择器会有样式隔离效果id 选择器、 属性选择器、标签选择器不受样式隔离的影响 建议:在组件和引用组件的页面中建议使用class选 择器不要使用id.属性、标签选择器!
3、stylelsolation的可选值
可选值默认值描述isolated是表示启用样式隔离在自定义组件内外使用class指定的样式将不会相互影响apply-shared否表示页面wxss样式将影响到自定义组件但自定义组件WXSS中指定的样式不会影响页面shared否表示页面Wwxss样式将影响到自定义组件自定义组件WXss中指定的样式也会影响页面和其他设置了apply-shared或shared的自定义组件
数据、方法和属性
1、data数据
在小程序组件中用于组件模板渲染的私有数据需要定义到data节点中
2、methods方法
methods: {addCount(){this.setData({count:this.data.count 1})this._showCount()},_showCount(){ //自定义方法建议以_开头wx.showToast({title: count值为 this.data.count,icon:none})},}3、properties properties: {//属性定义max:{ //完整定义属性的方式【当需要指定属性默认值时建议使用此方式】type:Number, //属性值的数据类型value:10 //属性默认值},max:Number //简化定义属性的方式【不许指定默认值时可以使用简化方式】},4、data和properties区别
在小程序的组件中properties属性和data数据的用法相同 他们都是可读可写的只不过 data 更倾向于存储组件的私有数据 properties 更倾向于存储外界传递到组件中的数据 showInfo(){console.log(this.data);console.log(this.properties);console.log(this.datathis.properties);}5、使用setData修改properties的值 由于data数据和properties属性在本质上没有区别因此properties属性的值也可以用于页面渲染或使用setDat为properties 中的属性重新赋值 // !-- 使用setData修改properties的值 --properties:{ max:Number} //定义属性数据监听器
1、什么是数据监听器 数据监听器用于监听和响应任何属性和数据字段的变化从而执行特定的操作。他的作用类似于vue中的watch侦听器。在小程序组件中数据监听器的基本语法格式入下 observers:{字段A字段B:function(字段A的新值,字段B的新值){//do something}}2、监听对象属性的变化
数据监听器支持监听对象中单个或多个属性的变化示例语法如下
Component({observers:{对象:属性A对象属性B:function(){//触发此监听器 的3种情况//【为属性A赋值】使用setData 设置 this.data.对象.属性A 时触发 //【为属性B赋值】使用setData 设置 this.data.对象.属性B 时触发 //【直接为对象赋值】使用setData设置this.data.对象 时触发//do something}}
})methods: {changeR(){ //修改rgb对象r属性的值this.setData({rgb.r:this.data.rgb.r 5255 ?255 :this.data.rgb.r 5})},changeG(){ //修改rgb对象g属性的值this.setData({rgb.g:this.data.rgb.g 5255 ?255 :this.data.rgb.g 5})},changeB(){ //修改rgb对象b属性的值this.setData({rgb.b:this.data.rgb.b 5255 ?255 :this.data.rgb.b 5})}}
