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

封装组件

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>