六，自定义组件

一，组件

1.1局部引用 ：在当前被引用的页面使用

在局部的*.json中

{
"usingComponents":{
                "my-test1":"/components/test1/test1"
        }
}

然后在对应的wxml文件中去使用

<my-test1></my-test1>

---

1.2全局引用：每个页面中使用

在app.json中去配置

---

1.3样式隔离

• app.wxss 中的全局样式对组件无效
• 只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响

styleIsolation：

可选值	默认值	描述
isolated	是	启用样式隔离
apply-shared	否	页面的wxss样式能影响到自定义组件
shared	否	相互影响

二,组件中的数据,方法和属性

2.1data数据

用于组件渲染的私有数据，需要定义到data节点中

2.2 methods 方法

事件处理函数和自定义方法定义在methods节点中

2.3 properties 属性

properties 是组件的对外属性，用来接收外界传递到组件中的数据

properties: {
    num:{
      type:Number,
      //默认值
      value:1
    }
  },

2.4 data 和 properties 的区别

本质上一样的，都是可读可写的

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

2.5 使用 setData 修改 properties

3、数据监听器

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

observers: {
    '字段A, 字段B': function(字段A的新值, 字段B的新值) {
        // do something...
    }
}

 /**
   * 组件的方法列表
   */
  methods: {
    add1(){
      this.setData({
        num1:this.data.num1 +1
      })
    },
    add2(){
      this.setData({
        num2:this.data.num2+1,

      })
    }
  },
    //监听器
    observers:{
      'num1,num2':function(new1,new2){
        this.setData({
          sum:new1+new2
        })
      }
    }
})

image.png
监听对象属性的变化：支持监听对象中单个或多个属性的变化

observers: {
    '对象.属性A, 对象.属性B': function(属性A的新值, 属性B的新值) {
        // 1：给属性A赋值
        // 2：给属性B赋值
        // 3：直接给对象赋值
    }
}

四,组件的生命周期

4.1组件的生命周期函数

生命周期函数	参数	描述
created	无	组件实例刚创建（不能调用setData）
attached	无	组件实例进入页面节点树时（this.data初始化完毕）
ready	无	组件在视图层布局完成后
moved	无	组件实例被移动到节点树另一个位置
detached	无	组件实例被从页面节点树中移除（清理性质的工作）
error	Object Error	组件方法抛出错误

4.2 lifetimes节点

 lifetimes:{
    created(){

          },

  }

5、组件所在页面的生命周期

5.1 组件所在页面的生命周期函数

组件所在页面的生命周期函数	参数	描述
show	无	组件所在页面被展示时
hide	无	组件所在页面被隐藏时
resize	Object Size	组件所在页面尺寸变化时

5.2 pageLifetimes节点

pageLifetimes:{
show(){

    },
hide(){

    },
resize(){

    },
}