一、自定义组件

（一）创建组件

• 在项目的根目录中，鼠标右键，创建components -> test文件夹
• 在新建的components -> test文件夹上，鼠标右键，点击“新建Component"
• 键入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为.js，.json，.wxml和.wxss

（二）引用组件

组件的引用方式分为“局部引用”（组件只能在当前被引用的页面内使用）和“全局引用”（组件可以在每个小程序页面中使用）。

局部引用：在页面的.json文件中，引入组件

//在页面的.json文件中，引入组件
{
"usingComponents": {
"my-test": "/components/test/test"
}
}
//在页面的.wxml文件中,使用组件
<my-test></my-test>

全局引用:在app.json中，引入组件

//在app.json文件中，引入组件
{
"pages":[
],
"windows":{
},
"usingComponents": {
"my-test": "/components/test/test"
}
}
//在页面的.wxml文件中,使用组件
<my-test></my-test>

（三）自定义组件样式

1、样式隔离

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

2、组件样式隔离的注意点

• app.wxss中的全局样式对组件无效
• 只有class选择器会有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响
• 在组件和引用组件的页面中建议使用class选择器，不要使用id、属性、标签选择器

3、修改组件的样式隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过stylelsolation修改组件的样式隔离选项，用法如下:

//在组件的.js文件中新增如下配置
Component({
options: {
stylelsolation: 'isolated'
//一共三个属性：isolated、apply-shared、shared
},
})
//或在组件的.json文件中新增如下配置
{
// "styleIsolation"": "isolated"
}

（四）自定义组件的data和methods

1、data数据

在小程序组件中，用于组件模板渲染的私有数据，需要定义到data节点中，示例如下:

Component({
//组件初始数据
data: {
count: 0
}
})

2、methods方法

小程序组件中，事件处理函数和自定义方法需要定义到methods节点中，示例代码如下:

Component({
methods: {
//组件的方法列表【包含事件处理函数和自定义方法】
addCount() { //事件处理函数
//自定义组件的properties
if (this.data.count >= this.properties.max) return
this.setData({ count: this.data.count + 1 })
this._showCount() //通过this直接调用自定义方法
}，
_showCount() { //自定义方法建议以_开头
wx.showToast({
title: 'count值为: ' + this.data.count,
icon: 'none'
})
}
}
})

（五）自定义组件的properties

在小程序组件中，properties是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下:

Component({
//属性定义
properties: {
max: {
//完整定义属性的方式【当需要指定属性默认值时，建议使用此方式】
type: Number,
//属性值的数据类型
value: 10
//属性默认值
}，
max: Number
//简化定义属性的方式【不需指定属性默认值时，可以使用简化方式】
}
})
<my-test1 max="10"></my-test1>

data 和properties的区别:在小程序的组件中，properties属性和data 数据的用法相同，它们都是可读可写的，只不过

• data更倾向于存储组件的私有数据
• properties更倾向于存储外界传递到组件中的数据

（六）自定义组件的数据监听器

1、定义

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于vue 中的watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下:

Component({
observers: {
'字段A,字段B': function(字段A的新值，字段B的新值){
}
}
})

2、 案例

<view>{{n1}}+ {{n2}} = {{sum}}</view>
<button size="mini" bindtap="addN1">n1自增</button>
<button size="mini" bindtap="addN2">n2自增</button>

Component({
data: { n1: 0,n2: o,sum: 0},
//数据节点
methods: {
//方法列表
addN1(){this.setData({n1:this.data.n1+1})},
addN2(){this.setData({n2:this.data.n2+1})}
},
observers: {
//数据监听节点
'n1，n2': function(n1, n2){
//监听n1 和n2数据的变化
this.setData({ sum: n1 +n2})
//通过监听器，自动计算sum的值
}
}
})

3、 监听属性变化

Component({
observers: {
'对象.属性A，对象.属性B' : function(属性A的新值,属性B的新值){
//触发此监听器的3种情况:
//为属性A赋值:使用setData设置 this.data.对象.属性A时触发
//为属性B赋值:使用setData设置 this.data.对象.属性B时触发
//直接为对象赋值:使用setData设置this.data.对象时触发
}
//RGB案例监听
// 'rgb.r，rgb.g，rgb.b': function (r，g，b) {
//this.setData({
//fullColor: `${r},${g},${b}`
//})
//},
'rgb.**':function(obj){
this.setData({
fullColor:`${obj.r},${obj.g},${obj.b}`
})
}
}
})

（七）自定义组件的纯数据字段

1、定义

纯数据字段指的是那些不用于界面渲染的data字段。

2、应用场景

某些data中的字段既不会展示在界面上，也不会传递给基他组件，仅仅在当前组件内部使用。带有这种特性的data字段适合被设置为纯数据字段。

3、好处

纯数据字段有助于提升页面更新的性能。

4、使用规则

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

Component({
options: {
//指定所有_开头的数据字段为纯数据字段
pureDataPattern:/^_/
},
data: {
a: true,
//普通数据字段
_b: true，
//纯数据字段
}
})

（八）自定义组件的生命周期函数

 lifetimes节点声明并使用。

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

pageLifetimes节点声明并使用。

（十）自定义组件的插槽

1、定义

在自定义组件的wxml结构中，可以提供一个<slot>节点（插槽)，用于承载组件使用者提供的 wxml结构。

2、js启用多插槽

options: {
multipleSlots: true
},

以不同的name来区分不同的插槽。

二、组件通信

（一）共享数据

1、使用属性绑定实现父向子共享数据

父子组件之间通信的3种方式：

• 属性绑定：用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据
• 事件绑定：用于子组件向父组件传递数据，可以传递任意数据
• 获取组件实例：父组件还可以通过 this.selectComponent()获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法。

（1）属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。父组件的示例代码如下:

//父组件的 data节点
data: {
count: 0
}
//父组件的 wxml结构
<my-test3 count="{{count}}"></my-test3>
<view>------</view>
<view>父组件中，count值为:{{count}}</view>

子组件在properties节点中声明对应的属性并使用。示例代码如下:

//子组件的properties节点
properties :{
count: Number
}
//子组件的 wxml结构
<text>子组件中，count值为:{{icount}}</text>

2、使用自定义事件实现子向父共享数据

事件绑定用于实现子向父传值，可以传递任何类型的数据。使用步骤如下:

• 在父组件的js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件。
• 在父组件的wxml 中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件。
• 在子组件的js 中，通过调用this.triggerEvent('自定义事件名称'，{/*参数对象*/})，将数据发送到父组件。
• 在父组件的js 中，通过e.detail获取到子组件传递过来的数据。

//在父组件中定义syncCount方法
//将来，这个方法会被传递给子组件，供子组件进行调用
syncCounto() {
console.log( " syncCount")
},

<!--使用bind:自定义事件名称（推荐。结构清晰)-->
<my-test3 count="{{count}}" bind:sync="syncCount"></my-test3>
<!--或在bind后面直接写上自定义事件名称-->
<my-test3 count="{{count}}" bindsync="syncCount">/my-test3>

//子组件的 wxml结构
<text>子组件中，count值为:{{count}}</text>
<button type=""primary" bindtap="addCount">+1</button>
//子组件的js代码
methods: {
addCount() {
this.sgtData({
count: this.properties.count + 1
})
this.triggerEvent( 'sync', {value: this.properties.count})
}
}

syncCount(e) {
// console.log(e.detail.value)
this.setData({
count: e.detail.value
})
},

（二）使用selectComponent获取组件实例

可在父组件里调用this.selectComponent("id或class选择器")，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器，例如 this.selectComponent(".my-component")。

//wxml 结构
<my-test3 count="{{count}}" bind:sync="syncCount" class="customA" id="cA"></my-test3>
<button bindtap="getChild">获取子组件实例</button>

getChild() {
//按钮的tap事件处理函数
//切记下面参数不能传递标签选择器'my-test3 '，不然返回的是null
const child = this.selectComponent( '.customA')
//也可以传递id 选择器#CA
child.setData({count:child.properties.count + 1 })
//调用子组件的 setData方法child.addCount()
//调用子组件的 addCount方法

（三）自定义组件的behaviors

1、定义

behaviors（用来实现代码共享） 是小程序中，用于实现组件间代码共享的特性，类似于Vue.js 中的“mixins”。

2、工作方式

每个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。（每个组件可以引用多个behavior,behavior也可以引用其它behavior）

3、创建

调用Behavior(Object object)方法即可创建一个共享的 behavior实例对象，供所有的组件使用:

//调用 Behavior(）方法，创建实例对象
//并使用module.exports 将 behavior实例对象共享出去
module.exports = Behavior({
//属性节点
properties:{},
//私有数据节点
data: { username: 'zhang' }，
//事件处理函数和自定义方法节点
methods: {},
//其它节点...
})

4、导入与使用

在组件中，使用require()方法导入需要的 behavior，挂载后即可访问behavior中的数据或方法，示例代码如下:

//使用require(导入篙要的自定义 bchavior模块
const myBchavior = require("../../bchaviors/my-bchavior")
Component({
//将导入的 behavior实例对象，挂载到 bchaviors数组节点中，即可生效
behaviors: [myBchavior],
//组件的其它节点...
})

5、behavior中所有可用的节点

6、同名字段的覆盖和组合规则（ behavior​​​s官方文档）

组件和它引用的behavior中可以包含同名的字段，此时可以参考如下3种同名时的处理规则：

• 同名的数据字段(data)
• 同名的属性(properties)或方法(methods)
• 同名的生命周期函数

最后

以上就是合适冬瓜为你收集整理的微信小程序开发整理-mp4一、自定义组件二、组件通信的全部内容，希望文章能够帮你解决微信小程序开发整理-mp4一、自定义组件二、组件通信所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。