使用自定义组件的时候，经常需要从组件传值到父视图,下面就拿代码直观的介绍一下
一、组件的相关代码
关键点是要添加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
