网址:www.bugshouji.com
平时写微信小程序时,没有用到自定义组件,今天了解了一下,还是很简单的。
把对应使用的一些方法分享出来,大家有需要的可以看看
查阅文档:指南 -> 自定义组件
1. 定义组件
首先,创建一个components文件夹,专门用于放组件
然后,在components中创建head文件夹,用于放head组件的文件
然后,选中head,右键选择新建Component(即会生成.js, .json, .wxml, .wxss四个文件)
head.json中,可以看到配置“component”:true; 这是说明head可以作为组件使用
head.js 在js文件中,可以看到使用的是Component()来注册组件
2. 引用组件
相对路径与绝对路径
“./”:代表目前所在的路径
"../":代表上一层路径
“/”开头,代码根目录(绝对路径)
在要引用组件的页面,设置页面.json文件,如下图:
3. 使用组件
注:使用的组件名,与上面引用时,设置的组件名保持一致
4. 组件通信(父传值)
子组件中,使用properties属性定义传递的属性
properties: {
myProperty: { // 属性名
type: String,
value: ''
},
myProperty2: String // 简化的定义方式
},
properties: {
like: {
type: Boolean,//类型必填,Number,String,Boolean,Object,Array,null(任意类型)
value: false, //默认值,可以不填,boolean类型的默认值为false
observer: function(
){} //当传入的值改变的时候,微信小程序会重新执行
}
}
注意:properties可以在wxml中用{{}}来绑定,和data类似
子组件定义属性
父组件中传递数据
5. 组件自定义事件(子传父)
父组件
注:微信小程序中事件绑定有两种方式
第一种方式: bind:事件名, bind后面需要跟上冒号,冒号后面跟上事件名,例如: <view bind:tap="fnName"></view>
第二种方式:bind事件名,bind 后面直接跟上事件名,例如:<view bindtap=“fnName"></view>
父组件中,可以在e.detail中查看,子组件传过来的值
子组件
6.组件的封闭性、开放性及粒度
组件封装性、开放性:封装在内部 ,开放出来的
粒度:非常简单的功能还是非常复杂的功能