微信小程序中的传值问题

父传子-------->子组件用 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
  }
})