🎁写在前面:

观众老爷们好呀,这里是前端小刘不怕牛牛频道,小程序系列文章又更新了呀。

上文我们讲解了微信小程序自定义组件的入门知识,那么今天牛牛就来讲讲自定义组件的进阶知识吧,赶紧拿起小本本做笔记呀!

【微信小程序】自定义组件(二)

文章目录

    • 一,组件的数据和方法
      • 1.1 data数据
      • 1.2 methods方法
      • 1.3 properties属性
    • 二,数据监听器
    • 三,纯数据字段
    • 四,组件的生命周期
      • 4.1 生命周期阐述
      • 4.2 定义生命周期
      • 4.2 监听组件所在页面的生命周期

一,组件的数据和方法

自定义组件的数据和方法在使用上,和Vue的组件十分相似,不过也有一点区别,首先我们来了解一下组件私有数据的定义。

1.1 data数据

data中的数据就作为组件的私有数据使用,定义在对应自定义组件js文件下的component构造器中,语法如下:

Component({
	data : {
		a : 10,
		b : 20
	}
})

这样我们就给组件定义了两个数据,在模板在我们可以直接{{a}}调用,而在component构造器中,我们也只需this.a便可获取到该数据。

1.2 methods方法

methods中方法的定义也是与Vue十分相似,位置与上述的data同级,语法如下:

Component({
	methods : {
		// 定义一个isShow函数
		isShow(){
			// do something
		}
	}
})

不过,在开发中会将methods方法分为事件处理函数和自定义方法,事件处理函数是监听事件,当事件触发再调用。而自定义方法则是由我们自己调用。

在命名上,建议methods中的自定义方法以_开头,以便区分。

1.3 properties属性

properties可以称之为对外属性,用来接收外界传递给组件的数据。而这个外界就是父组件,也就是说在页面引用自定义组件的时候,可以同时传递数据进去,组件就会通过properties属性接收传进来的数据。

<son-view username='niuniu'></son-view>

学过Vue的小伙伴可能就说了,这不就是Vueprops属性吗。

对,但不完全对。在微信小程序中,properties属性里的数据也是可以修改的,这是需要注意的地方。

回归正题,如何在组件中接收这个数据呢?

  1. 如果你想给properties中 的数据定义默认值,若没有传值,则用默认值赋值,那么你需要用完整格式

    properties : {
    	username : {
    		type: String,
    		value : xiaoliu
    	}
    }
    
  2. 如果不需要赋默认值,就可以使用简化格式

    properties : {
    	username : String
    }
    

如何修改:

我们还是可以直接调用this.setData方法进行修改。

this.setData({username : this.username.slice(0, -1)})

二,数据监听器

数据监听器其实类似于Vuewatch监听属性

我们可以选择对某个数据进行监听, 当发生变化时,调用对应的回调函数

Component({
	observers : {
		'username' : function(username){}
	}
})

一个回调函数可以对应监听多个,只需要添加对应参数即可。

监听对象属性字段:

当我们想要监听对象里面的数据,只需要用obj.username代替上面的username即可。

需要注意的是,监听对象属性的触发情况,不仅有this.setData方法改变对象属性值触发,直接给对象赋值也会触发。

三,纯数据字段

简而言之,在data的数据,不用于界面的渲染,也不传递给其他组件,仅在组件内部使用,我们便可把他定义为纯数据字段,这样做的作用就是提升页面更新的性能

使用方法:

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

比如我想要让开头是_的字段名作为纯数据字段,我可以这样做。

Component({
	options : {
		pureDataPattern : /^_/
	}
})

四,组件的生命周期

前面我们提过小程序的生命周期、页面的生命周期,组件的生命周期的作用与前两者一样,帮助程序员在特定的时间点处理一些事情。

4.1 生命周期阐述

组件的生命周期按时间顺序有:

钩子 说明
created Component实例创建时调用
attached 实例进入页面节点树
ready 在组件在视图层布局完成后执行
moved 在组件实例被移动到节点树另一个位置时执行
detached 在组件实例被从页面节点树移除时执行
error 组件方法抛出错误时

对于组件来说,最重要的生命周期是 createdattacheddetached

  • created调用时,组件实例刚创建,不能用setData,通常只是给this添加一些自定义的属性字段
  • attached调用时,this.data初始化完毕,这时候我们可以做一些初始化工作,比如发送请求获取初始数据
  • 而当detached调用时,退出页面,此时可以做一些清理性质的工作

4.2 定义生命周期

定义生命周期的方法有新旧两种,旧的方法和Vue一样,直接在Component里面定义(第二级)。

而新的方法则是需要在Component中的lifetimes中定义,建议使用新的方法定义生命周期。

4.2 监听组件所在页面的生命周期

有时,组件的一些行为需要依赖所在页面生命周期调用的时机,如触发页面的show时,组件想要显示出欢迎回来的字样

这时候,我们可以在组件中监听页面的生命周期,只需要在ComponentpageLifetimes中定义即可。

pageLifetimes : {
	show : function(){
		//触发时调用
	}
}

注意:

组件只可访问showhideresize三个页面生命周期

今天的小程序文章到这里就结束啦,如果觉得对您有帮助的话,可以关注牛牛接下来的文章

感谢您的支持,您的支持是我们创作的最大动力!!!

债见~~

【微信小程序】自定义组件(二)
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。