微信小程序自定义组件----父子组件间通信
自定义组件有非常高的灵活行,就算不能提出优秀的公共组件,自定义组件也有它的用处,减小单文件代码体积,后期维护项目也特别方便,而平时开发中用的最多的还是父子组件间的通信,今天有时间就整理一下。
父传子
父组件 向 子组件 传递数据通过标签属性的方式来传递
1.子组件
这里是我自己二次封装的一个loading组件,先在components下新建一个文件名叫myloading,文件同名
1-1 myloading.json
json文件,一定要注意,组件json文件中的component必须为true,这点和普通页面不同。
1-2 myloading.js
js文件,最外层是component包裹不是page包裹,properties包裹的是组件的属性列表,我的理解就是相当于Vue框架的props属性,用来接收父组件传过来的值
1-3 wxml文件就是你的html要写的东西
1-4 wxss文件写自己想要的样式
2.父组件
2-1.json文件,注册组件名和组件路径
2-2wxml文件中,写上注册组件的标签,{{isShow}}就是我传过去的数据,用过vue的父子传值的对这个写法肯定会很眼熟了,是的,这就是微信的父向子的通信,这样就好了
子传父
子组件
wxml文件中
js文件中,子组件methods中写绑定事件,这个语法用过Vue的子传父通信的同学也会特别眼熟对吧,注意,函数要写在methods中,写在外面是没有效果的,因为这是在组件中,这样我们的子组件就写好了,
父组件
wxml文件中,
js文件写上对应函数,然后就可以在函数中写上你的功能逻辑了,对了 ,子组件传过来的数据就在e里面的detail中,这样父组件就拿到了子组件的数据了。
以上就我个人对微信小程序的父子通信的理解,如有不足欢迎评论区不足,我会一条条的看的
如果看完对你们有帮助的话,千万别吝啬你们的小星星咯!又是勤劳的一天,爱你们哟