微信小程序传值 父组件动态的传递给子组件数据 子组件接收不到？

Question

我在网上找到一个第三方的select下拉选择插件
在data中写数据是子组件可以接收到的


然后模拟动态的传数据过去，这样：

子组件这里处理父组件传递的数据

this.data.options死活拿不到数据

有小程序大佬帮忙看看，谢谢了
代码贴到下面了
组件代码:
select.js:

Component({
  properties: {
    options: {
      type: Array,
      value: []
    },
    defaultOption: {
      type: Object,
      value: {
        id: '000',
        name: '种子种苗'
      }
    },
    key: {
      type: String,
      value: 'id'
    },
    text: {
      type: String,
      value: 'name'
    }
  },
  data: {
    result: [],
    isShow: false,
    current: {}
  },
  methods: {
    optionTap(e) {
      let dataset = e.target.dataset
      this.setData({
        current: dataset,
        isShow: false
      });

      // 调用父组件方法，并传参
      this.triggerEvent("change", {
        ...dataset
      })
    },
    openClose() {
      this.setData({
        isShow: !this.data.isShow
      })
    },

    // 此方法供父组件调用
    close() {
      this.setData({
        isShow: false
      })
    }
  },
  lifetimes: {
    attached() {
      // 属性名称转换, 如果不是 { id: '', name:'' } 格式，则转为 { id: '', name:'' } 格式
      let result = []
      if (this.data.key !== 'id' || this.data.text !== 'name') {
        for (let item of this.data.options) {
          let {
            [this.data.key]: id, [this.data.text]: name
          } = item
          result.push({
            id,
            name
          })
        }
      }
      this.setData({
        current: Object.assign({}, this.data.defaultOption),
        result: result
      })
    }
  }
})

select.json:

{
  "component": true,
  "usingComponents": {}
}

select.wxml:

<view class="select-box">
  <view class="select-current" catchtap="openClose">
    <text class="current-name">{{current.name}}</text>
  </view>
  <view class="option-list" wx:if="{{isShow}}" catchtap="optionTap">
    <text class="option" data-id="{{defaultOption.id}}" data-name="{{defaultOption.name}}">{{defaultOption.name}}
    </text>
    <text class="option" wx:for="{{result}}" wx:key="{{item.id}}" data-id="{{item.id}}" data-name="{{item.name}}">{{item.name}}
    </text>
  </view>
</view>

select.wxss:

.select-box {
  position: relative;
  width: 100%;
  font-size: 30rpx;
}

.select-current {
  position: relative;
  width: 100%;
  padding: 0 10rpx;
  line-height: 70rpx;
  border: 1rpx solid #ddd;
  border-radius: 6rpx;
  box-sizing: border-box;
}

.select-current::after {
  position: absolute;
  display: block;
  right: 16rpx;
  top: 30rpx;
  content: '';
  width: 0;
  height: 0;
  border: 10rpx solid transparent;
  border-top: 10rpx solid #999;
}

.current-name {
  display: block;
  width: 85%;
  height: 100%;
  word-wrap: normal;
  overflow: hidden;
}

.option-list {
  position: absolute;
  left: 0;
  top: 76rpx;
  width: 100%;
  padding: 12rpx 20rpx 10rpx 20rpx;
  border-radius: 6rpx;
  box-sizing: border-box;
  z-index: 99;
  box-shadow: 0rpx 0rpx 1rpx 1rpx rgba(0, 0, 0, 0.2) inset;
  background-color: #fff;
}

.option {
  display: block;
  width: 100%;
  line-height: 70rpx;
  border-bottom: 1rpx solid #eee;
}

.option:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

使用组件：
wxml：

  <view class="list">
    <view class="header">
      <view class="left">
        <view class="category"> 类别：</view>
        <view class="containers" bindtap="close">
          <view class="select-wrap">
            <select id="select" options="{{options}}" defaultOption="{{defaultOption}}" key="city_id" text="city_name" bind:change="change"></select>
          </view>
        </view>
      </view>
      <view class="right">视频</view>
    </view>
  </view>

样式：

.list {
  padding: 0 24rpx;
}

.header {
  display: flex;
  padding-top: 24rpx;
  align-items: center;
  justify-content: space-between;
  padding-right: 136rpx;
}

.header .left {
  display: flex;
  align-items: center;
}

.header .left .category {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}

.left .containers .select-wrap {
  width: 180rpx;
}

.header .right {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}

js数据：

// pages/fiveModules/diseasesInsect/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isShow: true,
    options: [],
    defaultOption: {
      id: '000',
      name: '种子种苗'
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  getSwitch() {
    var isShow = !this.data.isShow
    this.setData({
      isShow: isShow
    })
  },
  change(e) {
    console.log(e);
  },
  bandDetails(e) {
    wx.navigateTo({
      url: '/pages/fiveModules/selectVarieties/varietyDetails/index',
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.setData({
      options: [{
        city_id: '001',
        city_name: '北京'
      }, {
        city_id: '002',
        city_name: '上海'
      }, {
        city_id: '003',
        city_name: '深圳'
      }]
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

Answer 1

为什么要用 lifetimes ? 不应该是直接 properties 传递进去就好了嘛？ 如果需要监听数据改变并且处理成自己想要的结构，就加一个 observers 去监听就行了呀。

Component({
  properties: {
    attr: {
      type: String,
      value: '',
      observer: function(newVal, oldVal) {
        // 属性值变化时执行
      }
    },
  }
})