原生小程序小话题——自定义组件2

一、组件的生命周期

1.组件本身的生命周期，写在Component大对象中的lifetimes对象下，如下

lifetimes:{
    created(){
      console.log("我是create,我里面可以请求数据，但是整个Component对象还没有构建好");
    },
    attached(){
      console.log("我是attached，相当于mounted，此时可以使用this.setData");
    },
    detached(){
      console.log("我是detached，组件离开时触发");
    }
  },

2.和页面相关的生命周期

这个和组件没多大联系，主要是组件所在页面的生命周期，反映到组件上，写在Component字段的pageLifetimes

 pageLifetimes:{
    hide(){
      console.log("我是hide，我会在组件所在页面hide的时候触发");
    },
    show(){
      console.log("我是show，我会在组件所在页面显示的时候触发");
    },
    resize(){
      console.log("我是resize，我会在页面尺寸发生变化时触发");
    }
  }

3.behavior当中的生命周期

我们的behavior当中肯定也会有生命周期，按照设计的逻辑想一想，生命周期肯定是不会同名属性替换的，而是都会执行，现在我们在组件之中添加一个behavior，其中包含这样的一些生命周期函数

 lifetimes:{
    created(){
      console.log("我是behavior当中的created");
    },
    attached(){
      console.log("我是behavior当中的created");
    },
    detached(){
      console.log("我是behavior当中的detached");
    }
  },

看一下测试结果

 成立，而且我们明显的可以看到behavior当中的生命周期是先于组件生命周期执行的

二、数据监听

这个是组件Component当中的observers字段，可以当成vue当中的watch，每当我们使用this.setdata来对data中的数据进行监听的时候，我们就可以进行某些操作

下面是一些关于如何监听的例子，分别是对单个数据的监听、多个数据的监听、对数组对象的监听、使用通配符的监听，此外在methods当中写的则是改变状态的函数

Component({
  properties: {
 
  },
  data: {
    a: 1,
    b: 3,
    sum: 0,
    obj: {
      name: "huangfeng",
      hobby:{}
    },
    arr: []
  },
  observers: {
    // 单个数据的监听
    'a': function (newa) {
      if (newa == 2) {
        console.log("搞什么鬼，一定要写个2吗");
      }
    },
    // 多个数据的结合监听
    "a,b": function (newa, newb) {
      this.setData({
        sum: this.data.a + this.data.b
      })
    },
    // 对对象的key或者数组的监听
    // 对对象key的监听
    "obj.name": function (newname) {
      if (newname == "huangfeng") {
        console.log("comeon,你根本没有修改名字");
      }
    },
    "arr[0]": function (newval) {
      console.log("arr数组终于有值了，这个值是", newval);
    },
    // 通配符的监听 
    // 注意通配符不能监听数组
    "obj.hobby.**":function(){
      console.log("我正在设置hobby值");
    }
  },
  methods: {
    changeA() {
      this.setData({
        a: 2
      })
      console.log("改变a");
    },
    changeB() {
      this.setData({
        b: 10
      })
      console.log(this.data.sum);
    },
    changeObj() {
      this.setData({
        obj: {
          name: "huangfeng"
        }
      })
    },
    changeArr() {
      this.setData({
        arr: [0]
      })
    },
    changeObjHobby(){
      this.setData({
        obj:{
          hobby:{first:"study"}
        }
      })
    }
  }
})

因为我们的组件的props最终是会放到data之中的，所以我们也可以使用这个observer监听传入的数据，我们这边组件中定义了一个name参数

 properties: {
    name:String
  },

 并加上对参数的监听

observers:{
"name":function(newname){
      console.log("你小子怎么传入新参数了");
    }
}

在页面上挂载参数

"{{name}}">
 
//data中的内容
  data: {
    name:"huangfeng"
  },
//在js部分，我们还定义了一个改变name的函数
 changeNameProp(){
    this.setData({name:"维达尔"})
  },

看一下调用改变参数之后的结果

 成了。

三、组件样式

这边我们来看一下，组件的样式部分的问题，这里面有几个注意点需要说一下，因为有一些样式问题，样式能用class写就用class写。

首先，组件中可以在wxss部分，使用：host的写法去规定基本样式

:host {
  color: yellow;
}

其次，我们可以通过Component对象中的options对象的styleIsolation来控制组件内外的样式交互

一般默认的样式交互是如下的

 options:{
    styleIsolation:"isolated"
  },

这种选项下，内外不影响，此外还有以下的选项，这样的话页面能影响组件，组件内部样式不能影响页面，当然相关的样式之类的限制还有很多，可以去官网上看看，我是觉得有点长

  options:{
    styleIsolation:"apply-shared"
  },

当然我要提醒一下，这种配置可以在json部分进行定义了

当然我们的组件也可以接受一下特定的外部定义的类，使用externalClasses数组就可以接受特定的外部的类

Component({
  externalClasses: ['my-class']
})

此外，为了方便书写，即使是在内外样式isolated的情况下，可以使用如下的写法

class="~blue-text"> 这段文本是蓝色的 

这段代码可以让你使用组件所在page的blue-text样式，要使用父组件的样式，可以采用以下的写法

class="^red-text"> 这段文本是红色的 

此外关于样式还有一些内容，都在官网上，我实在写不下去了。

另外，组件还有一部分知识没有写出来，下次再更新吧。