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

封装组件

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>