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

文章目录 1. 自定义组件1.1 局部引用组件1.2 全局引用组件1.3 组件和页面的区别1.4 组件的样式 2. 组件的数据、方法、属性2.1 data2.2 methods2.3 properties2.4 observers2.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": "组件路径"
}

<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")