封装组件

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 会占位   // ....  // json中引入的名字在这里使用，这里就是引入的组件  // ruleShow为自定义名称，{ {xxx}}为父组件传入的值

父传子

父组件页面

// 引入子组件 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为函数 childFn(e){  console.log(e.detail) // 子组件的值 }

注意点

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

// 加上page 会占位