微信小程序 小程序自定义组件与组件间操作(笔记)

1. 自定义组件

组件一般放在 components 文件夹下

1.1 局部引用组件

在页面的 json 配置文件中引用组件的方式，叫做局部引用

// 只可以在当前页面使用该组件
"usingComponents": {
  "my-test": "组件路径"
}

<my-test>my-test>

1.2 全局引用组件

在 app.json 全局配置文件中引用组件的方式，叫做全局引用

// 所有组件和页面都可以使用该组件
"usingComponents": {
  "my-test": "组件路径"
}

1.3 组件和页面的区别

• 从表面上来看，他们都是由四个文件组成，但是组件和页面的 js 与 json 文件有明显的不同
• 组件的 json 文件中需要声明 component: true 属性
• 组件的 js 文件中调用的是 Component() 函数
• 组件的事件处理函数需要定义到 methods 属性中

1.4 组件的样式

• 在组件中存在样式隔离

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

• 可以通过配置去更改样式隔离的模式，这两种方式都可以配置

  // 在组件的 js 文件中
  Component({
    options: {
  	styleIsolation: "isolated"
    }
  })
  

  // 或在组件的 json 文件中
  {
    "styleIsolation": "isolated"
  }
  

  styleIsolation 的可选值

2. 组件的数据、方法、属性

2.1 data

用法和 Vue 的一样

2.2 methods

用法和 Vue 的一样

2.3 properties

用法和 Vue 的 props 差不多，但是 this.properties === this.data，都是可读可写的

2.4 observers

用法和 Vue 的 watch 差不多

// 只不过只有函数式写法
observers: {
  // 参数始终为最新的值
  "data1, data2"(newData1, newData2) {
    console.log("我被修改了", newData1, newData2);
  }
}

2.5 纯数字字段

• 概括：有些情况下，某些 data 中的字段（包括 setData 设置的字段）既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用，可以用于提升页面更新性能

• 代码示例：

  Component({
    options: {
      pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
    },
    data: {
      a: true, // 普通数据字段
      _b: true, // 纯数据字段
    },
    methods: {
      myMethod() {
        this.data._b // 纯数据字段可以在 this.data 中获取
        this.setData({
          c: true, // 普通数据字段
          _d: true, // 纯数据字段
        })	
      }
    }
  })
  

  <view wx:if="{{a}}"> 这行会被展示 view>
  <view wx:if="{{_b}}"> 这行不会被展示 view>
  

2.6 behavior

用法和 Vue 的 mixin 类似

// 创建 behavior
module.exports = Behavior({
  properties: { },
  data: { },
  methods: { }
})

// 使用 behavior
var myBehavior = require('my-behavior')
Component({
  behaviors: [myBehavior]
})

3. 组件的生命周期

3.1 组件内的生命周期

Component({
  // 最好是写在 lifetimes 中
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

生命周期	参数	描述	最低版本
created	无	实例刚刚被创建时执行	1.6.3
attached	无	实例进入页面节点树时执行	1.6.3
ready	无	视图层布局完成后执行	1.6.3
moved	无	实例被移动到节点树另一个位置时执行	1.6.3
detached	无	实例被从页面节点树移除时执行	1.6.3
error	Error	组件方法抛出错误	2.4.1

3.2 组件所在页面的生命周期

还有一些特殊的生命周期，当组件所在页面发生对应的变化时，会在对应生命周期中，触发对应的生命周期函数

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

4. 插槽

// 这里插槽的用法和 Vue 的一模一样
// 只不过多个插槽，需要在组件中去开启配置
Component({
  options: {
    multipleSlots: true,
  }
})

5. 组件通信

5.1 属性绑定

用法和 Vue 的 props 一模一样

<myTest msg="我是要传入的数据">myTest>

// 子组件中
Component({
  // 我接收到了数据
  properties: {
    msg: String
  }, 
})

5.2 事件绑定

用法和 Vue 的自定义事件相似

页面/父组件内容

<myTest bind:myChangeCount="changeCount">myTest>

changeCount(e) {
  // 子组件传过来的数据
  console.log(e.detail)
}

子组件内容

<button bindtap="btn">
  点击向父组件传入数据
button>

methods: {
  btn() {
	this.triggerEvent("myChangeCount", {
      // 传入的数据
    })
  }
}

5.3 获取组件实例

用法和 Vue 的 refs 相似

<myTest class="test">myTest>

// 通过 css 选择器，获取组件实例，可以拿到组件任意的属性和方法
this.selectComponent(".test")