wepy

①因为公司用的是wpy文件,所以引用组件有点特殊,步骤如下:
     1)组件要写在components文件下,并且类继承wepy.component;
     2)先在父组件script标签中import引入子组件,如:(import Child from './Child');
     3)在js中的components下声明下子组件,给子组件一个id标识,如:(components = { ChildTag: Chi
ld });
     4)根据声明的子组件在相应的地方使用子组件标签,如:(<ChildTag></ChildTag>);这样就可以实现子组件的引入了。
②子组件与父组件之间的传参需要
     1)先在子组件的props中定义一下参数,如:(props={ title: { type: Number, default: 50,twoWay: true }});
     2)在父组件中接收参数是通过子组件的attribute进行获取,如:(<ChildTap :title="parentTitle"></ChildTap>);
     3)在父组件中也可以在data中设置参数的变化,如:(data = { parentTitle: 'p-title' });这样就可以实现父子组件之间的传参了,虽然在项目中没有被用到,但是也体会了一下这样的传参方式;
③在日历组件中有点击确定和取消的事件,点击确定时还要将选好的时间参数传递到父组件中;在wepy中有三种关于事件传递的方法,如下:
     1)$broadcast事件是由父组件发起,所有子组件都会触发事件,除非事件被手动取消;
     2)$invoke是一个组件对另一个组件的直接调用,通过传入的组件路径找到相应组件,然后再调用其方法;
     3)$emit与$broadcast正好相反,事件是由子组件发起的父组件会依次接收到$emit事件;
在日历这里我用的是$emit,因为需要子组件触发然后传到父组件;在父组件中自定义时候使用@customEvent.user绑定用户自定义组件事件,其中,@表示事件修饰符,customEvent 表示事件名称,.user表示事件后缀;目前有三种后缀:1).default: 绑定小程序冒泡事件事件,如bindtap;2).stop: 绑定小程序非冒泡事件,如catchtap;3).user: 绑定用户自定义组件事件,通过$emit触发;
具体实现是这样的:
     子组件:      <view class="ok" @tap="handleConfirm">确定</view>
       handleConfirm() {   //点击事件
             const time = this.year+ '-' +
                this.month + '-' +
                this.currentDay+ '  '+
                this.currentHour+':'+
                this.currentMinute
          this.$emit('childConfirm', time)  //将事件传递给父组件
         }
      父组件:    <Calendar @childConfirm.user="parentConfirm"></Calendar>
        parentConfirm(time, e) { //传递过来的事件并接收参数
               this.showCalendar = false
               this.remindTime = ''
               this.currentDate = time
         }
注:子组件传递过来的参数和父组件接收的参数的顺序是相反的,比如:
子组件:this.$emit('childConfirm', num, props1, props2)
父组件:parentConfirm(props2, props1, num, event)
前两个参数是确定的;
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值