Tencent / wepy

小程序组件化开发框架
https://wepyjs.gitee.io/wepy-docs/
Other
22.51k stars 3.05k forks source link

props传递过去的值,视图显示正确,但onLoad中打印undefined,方法中使用也是undefined,bug千千万啊 #1462

Closed littleQing closed 5 years ago

littleQing commented 6 years ago

组件代码:

<template>
  <!-- inline-number -->
  <view>
    <view class="list-center" @tap="handleInlineNumber">
      <image src="./../../assets/icons/del.svg" class="inline-number-add" data-id="{{id}}" id="del"></image>
      <view class="inline-number-label">{{label}}</view>
      <image src="./../../assets/icons/del.svg" class="inline-number-add" data-id="{{id}}" id="add"></image>
    </view>
  </view>
</template>

<script>
import wepy from 'wepy'
export default class InlineNumber extends wepy.component {
  props = {
    id: {
      type: String,
      default: '0'
    },
    label: {
      type: Number,
      default: 0
    }
  }
  methods = {
    handleInlineNumber (e) {
      let that = this
      that.$emit('inlineNumber', that.label) //undefined
    }
  }
  onLoad () {
    console.log(this.label)  //undefined
  }
}
</script>

父组件代码:

<repeat for="{{prices}}" key="index" index="index" item="item">
          <view class="list-space-between">
            <view>{{item.label}}</view>
            <InlineNumber :id.sync="item.type" :label.sync="item.number"></InlineNumber>
            <view>¥{{item.price}}</view>
          </view>
</repeat>

data = {
prices: [{
        type: '1',
        label: '成人价',
        number: 1,
        price: 30
      },
      {
        type: '2',
        label: '儿童价',
        number: 0,
        price: 20
      },
      {
        type: '3',
        label: '老人价',
        number: 0,
        price: 10
      }]
}
xuweikang commented 6 years ago

你模板显示的是 label,打印的是id undefined 我都没懂你意思

littleQing commented 6 years ago

打印label也是一样,模板可以显示正确,但在方法或生命周期onLoad中却拿不到label的值,打印label会是undefined

zhuman90 commented 6 years ago

你组件是遍历调用的?

wangyequn commented 6 years ago

同问,解决了吗?

wangyequn commented 6 years ago

props传递过去的值,视图显示正确,但onLoad中打印undefined --来自github的提问

产生的原因

onLoad执行的时候,还没有数据,可能是涉及到一个生命周期的问题,可是wepy对生命周期并不友好,所以,啦啦啦

解决方案

可以看一下官方文档$broadcast的部分 基本思路是利用$broadcast,在获取到数据后对数据进行广播,然后在子组件中获取到数据,有点丑,但是可以用 代码如下:

子组件
  events = {
    getDetail: (detail, $event) => {
      console.log(detail)
    }
  }
父组件
  async getCurriculumInfo () {
    let json = await api.getCurriculumInfo({
      query: this.query
    })
    if (json.data.statusCode === '200') {
      let data = json.data.data
      this.detail = data
    } else {
      tip.error(json.data.message)
    }
    this.$apply()
    // 对获取到的数据进行广播
    this.$broadcast('getDetail', this.detail)
  }
guanzhentian commented 6 years ago

这几天也遇到了一样的问题,然后其实在文档里有写到:

WePY 1.x 版本中,组件使用的是静态编译组件,即组件是在编译阶段编译进页面的,每个组件都是唯一的一个实例,目前只提供简单的 repeat 支持。不支持在 repeat 的组件中去使用 props, computed, watch 等等特性。

所以props拿不到是必然的,我也被undefined困扰好久。

ZweiLee commented 6 years ago

@wangwen1220 但这个解决方案是不是会传递冗余数据。

Ceeson commented 6 years ago

之前也遇到这个问题我的做法是,把要循环的数组传入组件,然后在组件里面repeat

stale[bot] commented 5 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. 因为这个 Issue 最近没有任何有效回复,所以被自动标记为了stale。 如果在未来7天依旧没有任何激活操作,那么该 Issue 将会被自动关闭。 感谢您的提问。