微信小程序实现子组根据点击的列表id件向父组件操作数据渲染到另外一个详情页

超详细的步骤，微信小程序实现子组件向父组件操作数据渲染到另外一个详情页

---

详细步骤

---

一、父组件的js中

父页面js中自定义函数：

goStudentDetail(e) {
    var detailId = e.detail.id
    console.log("2222",detailId);
    wx.navigateTo({
      url: '../studentdetail/index?id=' + detailId,
    })
  },

数据写入缓存：

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    var StudentList = [
      {
        id: 0,
        stu_id: '1940233372',
        password: '123456',
        stu_name: '张三',
        sex: '男',
        class_name: '网工4班',
        remark: '哈哈哈哈哈哈'
      },
      {
        id: 1,
        stu_id: '1940233073',
        password: '123456',
        stu_name: '李四',
        sex: '男',
        class_name: '网工4班',
        remark: ''
      },
      {
        id: 2,
        stu_id: '1940238279',
        password: '123456',
        stu_name: '王五',
        sex: '男',
        class_name: '网工4班',
        remark: ''
      },
      {
        id: 3,
        stu_id: '1940283272',
        password: '123456',
        stu_name: '老六',
        sex: '男',
        class_name: '网工4班',
        remark: ''
      }
    ]
    this.setData({
      StudentList: StudentList
    })
    //写入缓存
    wx.setStorageSync('StudentList', StudentList)
  },

二、父组件的WXML中

WXML代码如下（示例）：

 <student-list StudentList="{{StudentList}}" bind:getStudentId="goStudentDetail" />

三、子组件的WXML中

WXML代码如下（示例）：

<text class="text1 text-box" bindtap="getStudentId" data-id="{{item.id}}">修改</text>

四、子组件的js中

js代码如下（示例）：

/**
   * 组件的方法列表
   */
  methods: {
    getStudentId(e) {
      this.triggerEvent('getStudentId', {id: e.currentTarget.dataset.id})
      console.log("点击修改学生信息",e);
    },
  }

五、另外一个详情页的js中

js代码如下（示例）：

  data: {
    sex: ['男', '女'],
    student: {}
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //获取student传过来的id
    var detailId = options.id
    console.log("----",detailId);
    //获取缓存中的StudentList并重新赋值
    var StudentList = wx.getStorageSync('StudentList')
    console.log("获取缓存StudentList",StudentList);
    //获取指定下标的一个对象并重新赋值
    var student = StudentList[detailId]
    //更新数据到data
    this.setData({
      detailId: detailId,
      student: student
    })
    console.log("修改student",student);
  },

六、另外一个详情页的WXML中

在详情页的WXML中就可以通过{{student.class_name}}来渲染数据拉
wxml代码如下（示例）：

<view class="cu-form-group">
      <view class="title"><text style="color:red">*</text>班级：</view>
      <input placeholder="输入班级" value="{{student.class_name}}"></input>
    </view>

总结

不懂的可以在评论区@小编，或者私信小编，小编也是自己琢磨了有些时间才弄懂的。看懂的童鞋快给小编一键三连吧啊啊啊啊啊啊 阿里嘎多美羊羊桑！！！