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

封装组件

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>

巴特西

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

封装组件

注意点

最新文章

热门文章