微信小程序组件封装与传值与问题规避

打包组件1.在components文件中添加一个新的组件文件夹，并在此文件夹下新建一个组件2.在app.json中注册组件"usingComponents":{"page":"components/auth/index","componentB":"/components/componentB/componentB.js"},3.子组件1.在组件的json中，将页面设置为组件{"component":true}2.组件js//pages/integral/integralRules/index.js.jsComponent({behaviors:[],//父组件传入的值在这里，这里传入的值接受properties:{ruleShow:Boolean//父组件的值},data:{ruleShow:false,},//私有数据，可用于模板渲染//生命周期函数，可以是函数，也可以是methods部分定义的方法名attached:function(){},moved:function(){},detached:function(){},methods:{//这里写方法onClickHide(){this.setData({ruleShow:false});}}})4.父组件1、引入childcomponentsintoparentcomponent'sjson{"usingComponents":{"componentB":"/component/componentB/componentB.js"}}2.页面使用，parenttochild//pluspagewilltakeupspace//....//这里使用json中引入的名字，这里是导入的组件//ruleShow为自定义名称，{{xxx}}为父组件传入的值data:{ruleShow:false,},//规则弹框showFunction(){console.log('更改父组件的值');this.setData({ruleShow:true})}//这里修改的值会传回给子组件注1，这里封装了一个弹窗组件。弹窗组件一般通过true和false来控制显示和隐藏，隐藏状态下不占位置，但是如果组件的wxml有封装，那么即使组件在隐藏状态下也会占用空间，所以需要去掉，达到不占用空间的效果//添加页面会占用空间