首页 > 编程语言 >微信小程序组件封装传值以及问题点规避

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

时间:2023-01-30 19:13:21浏览次数:40  
标签:封装 componentB 微信 js json 组件 ruleShow 占位 传值

封装组件

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>

标签:封装,componentB,微信,js,json,组件,ruleShow,占位,传值
From: https://www.cnblogs.com/wang-fan-w/p/17077017.html

相关文章

  • 原生微信小程序跳转传参 : [非TabBar跳转传参] 和 [TabBar跳转传参]
    一般常用的微信小程序跳转分为两种1、非TabBar跳转2、TabBar跳转1、非TabBar跳转非TabBar页面的跳转通常使用wx.navigateTo来跳转页面,在链接后面加?传参,如下://跳转......
  • 微信小程序使用vant组件样式不生效的问题
    下面提供几个解决方案方案一:官方文档有说明,将app.json中的"style":"v2"去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。方......
  • 微信小程序【关于地址信息的接入以及自动选择当前位置】
    在做收货地址的时候,通常会让用户填写或者打开地图选择收获地址,此时就需要用到微信提供的地址API,在使用地址API的时候需要注册对应的API,而且地址API会经常调整,需要关注官方......
  • tcp/ip详解之04 以太网和802.3封装
    1.以太网和802.3封装在TCP/IP世界中,以太网IP数据报的封装是在RFC894[Hornig1984]中定义的,IEEE802网络的IP数据报封装是在RFC1042[PostelandReynolds1988]中定义的。......
  • 原生微信小程序封装request
    request文件//封装请求constbaseURL='https://api-hmugo-web.itheima.net/api/public/v1'constrequest=(options)=>{//returnnewPrimise才可以使用the......
  • 基于jssip封装的软电话功能模块SoftPhoneForWebrtc.ts
    SoftPhoneForWebrtc.ts : importJsSIPfrom'jssip'//自定义数据进行通信的socket事件functionselfSocketEvent(data){ if(window.$ak.socketMyself){ ......
  • 封装用于循环播放展示一组内容的组件
    <template><divv-if="show"class="command-code":style="{color:color}"><divclass="command-code-box"ref="boxRef":style="{width:contentWidth}">......
  • 企业微信注册
    以下是企业微信注册链接:https://work.weixin.qq.com/wework_admin/register_wx?from=myhome_baidu  ......
  • jQuery_1_封装原理
    jQuery是使用JavaScript 编写的函数库,用于简化了JavaScript编程。 问题:在一个页面中,无论是引入外部的js代码,还是内部分开写的js代码块,在此页面解析执行的时候,......
  • tcp/ip详解之02 tcp/ip封装
    1.tcp/ip封装 当应用程序用TCP传送数据时,数据被送入协议栈中,然后逐个通过每一层直到被当作一串比特流送入网络。其中每一层对收到的数据都要增加一些首部信息(有时还要......