父传子-------->子组件用 properties:{} 接收值
父组件:
1.配置 json 引用子组件
"usingComponents": {
"list":"/components/list/list"
}
wxml 文件
<list newGoodsList="{{newGoodsList}}" msg="周一周四·新品首发"></list>
子组件中的js文件(用 properties:{} 接收值);在wxml文件中用{{msg}}获取对应的值
Component({
properties:{
newGoodsList:{
type:Array,
value: [],
},
msg:{
type:String,
value: "",
}
}
})
子传父
我们尝试点击 product
组件中的任意一项,来触发父级的事件(productTap)。
<!-- 子组件wxml -->
<view class="product_list">
<view wx:for="{{showArr}}" wx:key="*this" class="product_list_box"
bindtap="productTap">
...
</view>
</view>
// components/product/product.js
Component({
...,
// 如果是组件,不是页面,就必须写methods
methods: {
productTap(){
// 小程序中子传父通过triggerEvent来实现
this.triggerEvent('fatherEvent', 100);
}
}
})
父组件:
<!-- 标签上使用bind来接收子组件传过来的事件 -->
<product-block showArr="{{showArr}}" bind:fatherEvent="fatherEventFn" />
Page({
...,
// 页面无需写methods
fatherEventFn(data){
console.log(data.detail); // 100
}
})