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

Posted 2020-12-21 争渡，争渡，惊起一滩鸥鹭

 

父组件：

绑定的一个属性(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: ‘草‘})

      }
     }
  }