微信小程序封装组件的思路
1.第一步:我一般在根目录下面创建一个components文件,里面放要要封装的子组件。
2.第二步:在创建的components这个文件夹里面创建我们要封装的子组件。在这个文件的目录下右键选择新建component,它会自动给我们创建四个文件,list.wxml:里面写布局,list.wxss:里面写对布局修改的样式,list.js:里面写对数据的修改,list.json:里面写配置文件
3.第三步:在list.js文件里面写组件通信,这个是父传子
List:{
type:Array,
value:[],
}
4.第四步:在页面文件,也就是pages文件下面,创建一个父组件,用来渲染页面和传递数据,还是跟上面创建的步骤一样,右键,然后创建component,他会自动创建四个文件
5.在父组件中找到index.json文件,在里面先把子组件的路径引进来
6.在父组件里面找到index.js文件,现在data里面定义一个空数组,用来接收修改后的值,修改的值必须要在setData里面修改
7.把获取到的数据传给之前定义在data里面的属性后,去我们创建的子组件list.wxml,开始循环,根据自己的需求,写相应的标签,在最后把数据循环出来
8.最后一步在父组件的index.wxml文件里面,用我们创建子组件的文件夹名字,在父组件里面写双标签,然后在标签里面把定义在子组件list.js里面的List这个对象传到标签中,来接收修改后的数组,list,最后把获取到的数据渲染到页面