微信小程序（自定义组件）

文章目录

自定义组件创建自定义组件引用组件组件和页面的区别自定义组件的样式样式隔离修改样式隔离选项组件的data和methods组件的properties数据监听使用纯数据字段提升页面性能什么是纯数据字段如何使用纯数据字段组件的生命周期函数周期函数类型定义生命周期函数组件所在页面的生命周期函数插槽单个插槽多个插槽组件间通信父子组件代码共享behaviors创建导入并使用behaviors中可用节点冲突规则

自定义组件

创建自定义组件

右键新建Component，自动生成四个文件

引用组件

局部引用：

在页面的.json文件中的usingComponents对象引用组件

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

​ 在wxml中使用组件

<my-test1></my-test1>

全局引用

在app.json中的usingComponents对象引用组件

组件和页面的区别

从文件组成来看，二者相同，但是具体内容会有不同之处

组件的.json文件中需要声明"component":true属性组件的.js文件中调用的是Component()函数组件的事件处理函数需要定义到methods节点中

自定义组件的样式

样式隔离

默认情况下自定义组件的样式只对当前组件生效，不会影响到组件之外的结构

注意点：

app.wxss中的全局样式对组件无效只有类选择器无效，id选择器、属性选择器、标签选择器仍会受到影响。因此，在组件和引用组件的页面中建议只使用class选择器

修改样式隔离选项

默认情况下，自定义组件具有样式隔离的特性，但有时我们确实需要对组件内部的样式进行控制

修改方式有两种

在组件的.js文件中新增如下配置stylesolation

Component({options:{stylesolation:'isolated'}})

在组件的.json文件新增stylesolation属性节点

stylesolation的可选值

组件的data和methods

同vue

组件的properties

同vue的props

properties:{// 完整定义max:{type: Number,value: 10},// 简化定义max: Number}

注意：在小程序中，properties和data中的数据都是可读可写的

使用setData可以修改properties的值

数据监听

同vue的watch

observers:{'字段A,字段B':function(newA,newB){// do something}}

监听对象中的属性

触发对象监听器的3种情况，使用setData

设置A设置B设置对象

// 指定监听observers:{'obj.A,obj.B':function(newA,newB){// do something}}// 监听所有属性observers:{'obj.**':function(newObj){// do something}}

使用纯数据字段提升页面性能

什么是纯数据字段

只存在于业务逻辑中，不需要渲染到页面的数据

如何使用纯数据字段

在Component构造器的options节点中，指定pureDataPattern为一个正则表达式，字段名符合这个正则表达式的将成为纯数据字段

options:{// 定义纯数据字段类型// 下划线开头的data就是纯数据字段pureDataPattern:/^_/},

组件的生命周期函数

周期函数类型

created：组件实例刚被创建好的时候 此时不能调用setData在该生命周期中，只应用于给该组件的this添加一些自定义的属性字段 attached：在组件完全初始化完毕、进入页面节点树后 此时this.data已被初始化完毕此周期主要用于初始化操作detached：组件离开页面节点树之后 退出一个页面时，会触发页面内每个自定义组件的detached主要做清理性质的操作

定义生命周期函数

小程序中定义生命周期函数有两种方式

新版方式（推荐）

lifetimes:{attached(){},detached(){}}

旧版方式

attached(){},detached(){}

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

当页面中的组件想在页面的某些生命周期进行操作，则需要用到组件在页面的生命周期函数

如何使用这些生命周期函数呢，还是在组件中

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

插槽

单个插槽

小程序默认自定义组件中只能使用一个<slot>插槽

多个插槽

需要在.js文件中启用多插槽

Component({options:{multipleSlots:true}})

定义方法和vue相同，用name指明

<slot name="before"></slot><slot name="after"></slot>

使用

<view slot="before">插槽填充内容</view>

组件间通信

父子组件

属性绑定：父组件向子组件，仅能设置JSON兼容的数据，使用方法同vue事件绑定：子组件向父组件传递，可以传递任意数据，实现思路同vue

// 子组件 this.triggerEvent == this.$emitthis.triggerEvent('事件名',{参数对象})

<!--父组件 html绑定事件--><my-test bind:事件名="syncCount"></my-test>

// 父组件 e.detail接收参数syncCount(e){console.log(e.detail);}

获取组件实例：父组件通过this.selectComponent("id或class选择器")获取子组件实例

<!-- 父组件 --><my-test bind:sync="syncCount" id="cA"></my-test><button bindtap="getChild">获取子组件实例</button>

// 父组件getChild(){const child = this.selectComponent('#cA')// child中包含子组件的所有信息console.log(child);}

代码共享behaviors

实现组件间的代码共享，类似于mixins混入

创建

在项目根目录创建behavior文件夹用于保存，直接创建js文件

调用Behavior(Object object)方法创建并共享出去

module.exports = Behavior({data:{userName: 'zs'},properties:{},methods:{}})

导入并使用

const myBehavior = require('../../behaviors/my-behaviors')Component({behaviors:[myBehavior],})

之后就可以像在普通js文件一样直接使用behaviors中的数据

behaviors中可用节点

冲突规则

冲突解决规则

总的来说就是，以用户最舒服的方式来解决冲突