微信小程序组件封装传值以及问题点规避

封装组件

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.js
Component({
 behaviors: [],
 // 父组件传入的值在这里,传入的值在这里接受
 properties: {
 ruleShow : Boolean // 父组件的值
 },
 data: {
 ruleShow:false, 
 }, // 私有数据,可用于模版渲染
 // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
 attached: function () {},
 moved: function () { },
 detached: function () { },
 methods: {
 // 此处编写方法
 onClickHide() {
 this.setData({ ruleShow: false });
 }
 }
})

4、父组件
1、父组件的json中引入子组件

{
 "usingComponents": {
 "componentB":"/component/componentB/componentB.js"
 }
}

2、页面使用,父传子

<page pclass="page"> // 加上page 会占位
 <view>
 // ....
 // json中引入的名字在这里使用,这里就是引入的组件
 // ruleShow为自定义名称,{{xxx}}为父组件传入的值
 <componentB ruleShow='{{ruleShow}}'></componentB>
 </view>
</page>
 data: {
 ruleShow: false,
 },
 // 规则弹框
 showFunction() {
 console.log('更改父组件的值');
 this.setData({
 ruleShow : true
 })
 }
 // 这里更改的值会回传给子组件


注意点

1、这里封装了一个弹窗组件,弹窗组件一般通过true和false控制显示和隐藏,隐藏状态下不占位,但如果组件的wxml上带有<page pclass="page>包裹,那么即使组件时隐藏状态也会占位,此时需要去掉才可以做到不占位效果。

<page pclass="page"> // 加上page 会占位
 <!-- 弹窗 -->
 <van-overlay show="{{ ruleShow }}" bind:click="onClickHide"></van-overlay>
</page>
作者:兔子先森原文地址:https://segmentfault.com/a/1190000043366364

%s 个评论

要回复文章请先登录注册