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

兔子先森兔子先森 - 2023-02-05 14:50:00

封装组件

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 p>  // 加上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 pjavascript"><page p> // 加上page 会占位  <van-overlay show="{{ ruleShow }}" bind:click="onClickHide"></van-overlay></page>

特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。

上一篇：【PHP】英文博客专栏PHP快速入门个人笔记

下一篇： PHP转Go实践：xjson解析神器「开源工具集」