微信小程序封装组件的思路

news/2024/7/20 3:03:52 标签: 小程序

微信小程序封装组件的思路

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,最后把获取到的数据渲染到页面
在这里插入图片描述


http://www.niftyadmin.cn/n/1836145.html

相关文章

研发部门压力管理探讨

富士康、华为员工跳楼事件,在媒体与舆论的背后,与死者们处于相似境地的我们,需要更多冷静和专业的思考,以及应对。在这篇文章中,我将目光集中在“压力管理”这个现代企业管理的名词上。认知压力消极怠工、负面评论、伤…

关于MVC权限控制的一点小想法

近来一直在学习MVC。 先检讨一下自己,本来一直在看WPF并向Silverlight靠拢的,可XAML这个东西一时半会领会不了它的真谛,所以暂时先放下了。虽然MVC看的比较系统,但暂时闲置了WPF和Silverlight还是有点沮丧感,觉得自己没…

Win7安装Tomcat

1.解压Tomcat包到D: 2.在Win7高级环境配置中建立变量Tomcat 输入路径值&#xff1a;D:\apache-tomcat-6.0.14 3. 在Tomcat安装目录下找到tomcat-user.xml 位于目录Tomcat 6.0\conf <?xml version1.0 encodingutf-8?> <tomcat-users> <role rolename"tomc…

mysql查询从周一开始算本周第一天

查询本周所有的数据&#xff08;本周第一天是周一&#xff09; SELECT * FROM task WHERE YEARWEEK(date_format(时间字段,%Y-%m-%d),1) YEARWEEK(now(),1); 查询本周所有的数据&#xff08;本周第一天是周日&#xff09; SELECT * FROM task WHERE YEARWEEK(date_format(时…

总分——完全背包问题

总分 Description 学生在我们USACO的竞赛中的得分越多我们越高兴。我们试着设计我们的竞赛以便人们能尽可能的多得分&#xff0c;这需要你的帮助。 我们可以从几个种类中选取竞赛的题目&#xff0c;这里的一个“种类”是指一个竞赛题目的集合&#xff0c;解决集合中的题目需要…

微信小程序页面跳转方式

微信小程序页面跳转方式 1.navigateTo&#xff1a;&#xff08;它是有返回键&#xff0c;但是他不可以跳转到tabBar页面&#xff09; //保留当前页面&#xff0c;跳转到应用内的某个页面 wx.navigateTo({url: /pages/detail/detail?id1//一个参数用模板字符串拼接&#xff0…

memset函数详细讲解

void *memset(void *s,int c,size_t n) 总的作用&#xff1a;将已开辟内存空间 s 的首 n 个字节的值设为值 c。例子 :main(){ char *s"Golden Global View"; clrscr(); //clear screenmemset(s,G,6); printf("%s",s); getchar(); return 0; } memset() 函…

yum安装gcc

yum -y install gcc 转载于:https://www.cnblogs.com/tanghuimin0713/archive/2013/04/30/3052015.html