码迷,mamicode.com
首页 > 微信 > 详细

微信小程序-父子组件传值

时间:2020-11-04 18:23:50      阅读:33      评论:0      收藏:0      [点我收藏+]

标签:current   参数   console   一个   log   nts   get   navig   大写   

 

父组件:

绑定的一个属性(btns),(子组件名可以使驼峰大写,也可以小写)

<order-button bind:viewPageReloadFuc="onViewPageReloadFuc" btns="{{item.orderControlBtns}}"></order-button>

父组件引用子组件

{
    "navigationBarTitleText": "我的订单",
    "usingComponents": {
        "order-button": "/components/order-button/order-button"
    }
}

 

onViewPageReloadFuc(e){
   console.log("子组件触发并传过来的参数值", e.detail.cao)
},

 

子组件:

<view wx:for="{{btns}}" wx:key="index">
   <view catchtap="buttonClick" data-btn="{{item}}">{{item.desc}}</view>
</view>

在子组件的json中,把自己定义为子组件

{
  "component": true
}

在properties里定义的是组件对外要开发的属性,在data里定义的是在组件里自己使用的私有的数据;

我们不要把data和properties里的变量设置成同一个名字,如果他们名字相同,properties里的会覆盖data里的。

Component({
  data: {
  },
  properties: {
    btns: {
      type: Array,
      value: []
    }
  },
  methods: {
    buttonClick(e){
      let btn = e.currentTarget.dataset.btn;
      // 一键复购
      if(btn.state == ‘buyAgain‘){
     //子组件传给父组件一个事件
      this.triggerEvent(‘viewPageReloadFuc‘, {cao: ‘草‘})
      }
     }
  }

 

微信小程序-父子组件传值

标签:current   参数   console   一个   log   nts   get   navig   大写   

原文地址:https://www.cnblogs.com/XUYIYUAN/p/13922894.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!