小程序组件传值给父视图

使用自定义组件的时候，经常需要从组件传值到父视图,下面就拿代码直观的介绍一下

一、组件的相关代码

关键点是要添加triggerEvent（触发指定对象的指定事件，并且立即执行该事件中的脚本）方法的调用,第一个参数是自定义事件名称，这个名称是在父视图页面调用组件时bind的名称，第二个参数就是想传递的数据。

<!--组件 shoppingcart.wxml -->
<view>
  <view>{{passshopinfo}}</view>
  <view class="btclass" bindtap="btclick">传值到父视图</view>
</view>

// 组件 shoppingcart.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    passshopinfo: {
      type: String,
      value: '商品标题'
    }
  },
  methods: {
    btclick: function(e) {
      this.triggerEvent("tragetinfo", this.properties.passshopinfo)
    },
  }
})

二、父视图的相关代码

需要在使用子组件处添加 bind:tragetinfo="getinfo" , getinfo是父js中的方法

<!-- 父视图 mall.wxml -->
<shoppingcart bind:tragetinfo="getinfo" ></shoppingcart>
<view>{{shopinfo}}</view>

// mall.js
  /**
   * 页面的初始数据
   */
  data: {
    shopinfo: ''
  },
  // 获取组件传递过来的数据，并渲染到父视图
  getinfo: function(e) {
    this.setData({
      shopinfo: e.detail,
    })
  }

点击按钮，即可将组件的值传递给父视图

image.png