自学内容网 自学内容网

小程序-4(自定义组件:数据、属性、数据监听器、生命周期函数、插槽、父子通信、behaviors)

目录

1.组件的创建和引用

局部引用组件

全局引用组件

组件和页面的区别

组件样式隔离

​编辑

组件样式隔离的注意点

修改组件的样式隔离选项

data数据

methods方法

properties属性

data和properties属性的区别

使用setData修改properties的值

2.数据监听器

什么是数据监听器

数据监听器的基本用法

监听对象属性的变化

监听对象中所有属性的变化

纯数据字段

纯数据字段的使用规则

纯数据字段改造成数据监听器

3.组件的生命周期

组件的全部的生命周期函数

组件主要的生命周期函数

lifetimes节点

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

pageLifeTimes节点

4.插槽

什么是插槽

单个插槽

启用多个插槽

定义和使用多个插槽

5.父子组件之间的通信

三种方式

属性绑定

事件绑定

使用selectComponent获取组件实例

6.behaviors

什么是behaviors

behaviors的导入和挂载

behaviors的重名


1.组件的创建和引用

局部引用组件

创建组件:右键-新建文件夹-右键-新建文件夹-右键-新建components

创建完组件后,在页面的.json文件中引入组件,在usingComponents中 "组件名":"/components/test/test"

在页面的.wxml文件中,使用组件 

全局引用组件

在app.json中引用组件

组件和页面的区别

组件的.json文件中需要声明"compotent":true属性

组件的.js文件中调用的是Compotent()函数

组件的事件处理函数需要定义到methods节点中,写在methods中

组件样式隔离

组件之间不会相互影响,组件和小程序页面之间不会相互影响

组件样式隔离的注意点

app.wxss中的全局样式对组件无效

只有类选择器才会有样式隔离效果,id选择器、属性选择器和标签选择器不受样式隔离的影响,所以建议使用类选择器,来避免样式的混淆

修改组件的样式隔离选项

第一种:在组件的.js文件中添加Component()方法,在其中使用options来修改组件隔离选项

第二种:在组件的.json文件中添加"styleIsolation":"isolated"来修改

styleIsolation的可选值有三种

isolated 组件和组件之间不会影响,组件和小程序页面之间不会影响

apply-shared  页面的样式会影响到组件的样式,但是组件的样式不会影响到页面的样式

shared  页面和组件之间的样式相互影响

data数据

用于组件模板渲染的私有数据,定义到data节点中

Component()方法的data节点中

methods方法

事件处理函数和自定义方法需要定义到methods节点中

事件处理函数指的是bindtap绑定的函数,自定义的方法以_下划线开头,可以调用wx.showToast()方法来显示弹窗,在wx.showToast()中有title和icon两个属性,icon一般是"none",即没有图标只有文字

properties属性

properties是组件的对外属性,用来接收外界传递到组件中的数据

第一种: max:Number        (简化定义属性的方法,没有指定属性默认值)

第二种: max{type:Number, value:10}  (完整定义属性的方法,指定属性默认值和属性的数据类型)

自增的时候控制最大值  if(this.data.count>=this.properties.max) return

data和properties属性的区别

二者都是可读可写的,用法相同

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

使用setData修改properties的值

该点的主要意思就是this.data.count=this.properties.count

2.数据监听器

什么是数据监听器

用于监听和响应任何属性和数据字段的变化,从而执行特定的操作

数据监听器的基本用法

监听器   能实现自动计算

observers:{

        'n1,n2':function(n1,n2){            //监听数据n1,n2的变化

        this.setData({sum:n1+n2})

}

}

监听对象属性的变化

支持监听对象中单个或者多个属性的变化

为谁赋值就用this.data.对象.属性A触发

可以修改某个对象的某个属性值

监听对象中所有属性的变化

如果某个对象需要监听的属性太多,可以使用通配符**来监听对象中所有属性的变化

'rgb.r,rgb.g,rgb.b':function(r,g,b)

'rgb.**':function(obj)

注意下面美元符号的用法

纯数据字段

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

如某些data中的字段既不会展示在界面上,也不会传递给其他组件,仅仅在当前组件内部使用

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

纯数据字段的使用规则

在Component方法中的options中写pureDataPattern:/^_/,并将想要的数据前面都加上_,使其成为纯数据字段

纯数据字段改造成数据监听器

3.组件的生命周期

组件的全部的生命周期函数

组件主要的生命周期函数

created、attached、detached

created:组件实例刚被创建好

attached:组件完全初始化完毕,进入页面节点树

detached:组件离开页面节点树

lifetimes节点

在Component函数中写lifetimes节点,在该字段中进行声明attached()和detached()

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

自定义组件的行为依赖于页面状态的变化,需要用到组件所在页面的生命周期

自定义组件中,组件所在页面的生命周期函数有show hide resize

show 组件所在的页面被展示时执行

hide 组件所在页面被隐藏时执行

resize 组件所在页面尺寸变化时执行

pageLifeTimes节点

4.插槽

什么是插槽

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

简单来说就是占位,先放好位置,但是不放内容,让使用者自行放入内容

单个插槽

例如,创建了一个test4组件,在test4的wxml文件中放置了一个view标签(有内容)和一个slot标签(无内容),在home文件中引入该组件,并通过view标签将内容放入slot标签中,实现占位和赋值

home.wxml

test4.wxml

结果

启用多个插槽

在组件的.js文件中,通过options:{multipleSlots:true}来启用多个插槽

定义和使用多个插槽

定义时给每个slot标签命名,name="",合理即可

使用时,在每个标签中添加上slot="对应名"

5.父子组件之间的通信

三种方式

属性绑定

实现父向子传递数据

在home.wxml中放置一个view,引入count,并在其js文件中,将count值赋值为0;在子组件中的wxml文件中写一个view标签,将count值放进去,在test5.js文件中接收count,一旦接收到就会实现数据通信

home.wxml

test5.wxml

test5.js

实现效果

事件绑定

利用自定义事件实现子向父传递数据

在子组件中的按钮绑定了一个addCount函数,每点击一次实现自增加一;现在在触发按钮时,将数据传递给父组件,让父组件也共享数据

在子组件的.js文件中使用this.triggerEvent('自定义事件名',数据)   value在此处赋值  this.data=this.properties

在父组件的.js文件中,通过e.detail获取到子组件传递过来的数据

使用selectComponent获取组件实例

在父组件的wxml文件中给子组件定义一个类选择器或者id选择器,设置一个按钮绑定获取子组件数据的事件函数

在子组件的.js文件中调用按钮的绑定事件函数,其中命名新值接收子组件的数据,就是在此处用到了selectComponent, 具体写法:const child=this.selectComponent(类选择器或者id选择器),之后想获得子组件的数据有两种方法,第一种:使用setData方法,重新定义count的数值(注意在此处,不能使用this,this指的是当前页面,放在这里不合适);第二种:直接调用子组件的addCount方法

相比之下,第二种方法更简单,第一种方法相当于是重新定义数据,给数据赋值

注意selectComponent的用法,后面的括号中放的是类选择器名(.类选择器名)或者id选择器(#id选择器名)

6.behaviors

什么是behaviors

behaviors是小程序中,实现组件间代码共享的特性

包含属性、数据、生命周期函数和方法,组件想使用其中的内容时可以进行导入

组件可以引用多个behavior

behaviors的导入和挂载

使用require()方法导入需要的behavior,即通过新的变量的来接收behavior的相对路径

const myBehavior=require("../../behaviors/my-behavior")

在Component()方法中挂载,即behaviors:[文件名]

注意:在A.js文件中导入并挂载的behavior文件,需在A.wxml文件中使用

behaviors的重名


原文地址:https://blog.csdn.net/2301_80486133/article/details/140495953

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!