封装组件
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({ // 父组件传入的值在这里，传入的值在这里接受 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>
父传子
父组件页面
// 引入子组件 <componentB ruleShow='{{ruleShow}}'></componentB> data : { ruleShow : '父组件的值' }
子组件页面
Component({ // 父组件传入的值在这里，传入的值在这里接受 properties: { ruleShow : String, // 父组件的值 }, // 子组件使用 // 函数要写在methods内 methods: { getVal(){ console.log(this.properties.ruleShow) // '父组件的值' } } })
子传父
子组件页面
Component({ data : { childVal : '子组件的值' } methods: { // 假如此处是一个点击事件，点击触发，传值 backVal(){ this.triggerEvent('child',this.data.childVal) //通过triggerEvent将参数传给父组件 } } })
父组件页面
// child为子组件的自定义名称 // childFn为函数 <componentB bind:child="childFn"></componentB> childFn(e){ console.log(e.detail) // 子组件的值 }
注意点
1、这里封装了一个弹窗组件，弹窗组件一般通过true和false控制显示和隐藏，隐藏状态下不占位，但如果组件的wxml上带有<page pclass="page>包裹，那么即使组件时隐藏状态也会占位，此时需要去掉才可以做到不占位效果。
<page pclass="page"> // 加上page 会占位 <!-- 弹窗 --> <van-overlay show="{{ ruleShow }}" bind:click="onClickHide"></van-overlay> </page>
