封装组件
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>