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

文章目录

- - 1. 自定义组件
  - - 1.1 局部引用组件
    - 1.2 全局引用组件
    - 1.3 组件和页面的区别
    - 1.4 组件的样式
  - 2. 组件的数据、方法、属性
  - - 2.1 data
    - 2.2 methods
    - 2.3 properties
    - 2.4 observers
    - 2.5 纯数字字段
    - 2.6 behavior
  - 3. 组件的生命周期
  - - 3.1 组件内的生命周期
    - 3.2 组件所在页面的生命周期
  - 4. 插槽
  - 5. 组件通信
  - - 5.1 属性绑定
    - 5.2 事件绑定
    - 5.3 获取组件实例

1. 自定义组件
组件一般放在 components 文件夹下
1.1 局部引用组件在页面的 json 配置文件中引用组件的方式，叫做局部引用

// 只可以在当前页面使用该组件 "usingComponents": { "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, // 纯数据字段 }) } } })

这行会被展示这行不会被展示

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