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

封装组件

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.jsComponent({  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>