微信小程序组件化编程和实践(上):https://cloud.tencent.com/developer/article/1029112
微信小程序组件化编程和实践(下):https://cloud.tencent.com/developer/article/1029113
根据公司的业务需求我是如何封装组件的:https://cloud.tencent.com/developer/article/1745596
思考:为什么使用组件?组件之间传参的意义何在?
组件化这个思想,类似于工业制造中的汽车生产-----零件组装,这样不管是是对于汽车的维修、改装都提供了便历。在软件开发模型——构建组装模型中,组件复用是很重要的一个思想,对于一个公司,他们可以可以构建自己的组件库,从而他们对相同类型的软件提供大大便历,并且这些组件库中的组件,都是经过时间检验的,不容易出错。
组件间的传值:因为组件我们只会定义一些接口来对接,而所需要的数据需要从某个入口传入(父组件)。当我们触发子组件的时候,父组件对应的也应该做出相应的反应。
一、父组件向子组件传参
方式:通过属性绑定的方式传递
步骤: 具体参见官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
1、在微信小程序结构目录中,新建一个组件组(组件的集合)。该组件组与页面在同一级目录下
2、新建一个header组件
a、header.json 设置"component": true ——含义:可设置自定义组件
b、父组件引用 ***.json设置 引用组件路径 "header":"../../components/header/header"
父组件 设置tabs属性并绑定tabs参数
***.wxml
子组件
***.js 利用properties获取父组件属性,并设置类型
Component({
/**
* 组件的属性列表
*/
properties: {
tabs:{
type:Array,
value:[]
}
}
)}
二、子组件向父组件传递参数
方式:通过方法绑定的方式传递
1.在子组件中通过triggerEvent定义一个函数并绑定参数
2.在父组件绑定子组件中定义的方法,并写一个处理的方法接受传递过来的参数
例如:在子组件中自定义一个itemChange方法 ,在父组件中绑定这个方法 (bind+itemChange),并处理定义一个handleItemChange来处理接受的参数。
========================子组件定义
header.wxml
-------header.js
Component({
methods: {
tapchange:function(e){
// 利用子组件向父组件
const {index} = e.currentTarget.dataset//获取当前选中的下标
console.log(index)
this.triggerEvent("itemChange",{index})//自定义事件(bind+'自定义名'):用它触发父组件的定义事件,同时给父组件传参
}
}
})
=======================父组件定义
-------***.wxml
-------***.js
HandleItemChange:function(e){
console.log(e.detail.index)
}