Taro小程序组件传值

前端小葛

已于 2023-04-20 16:20:35 修改

阅读量1k

点赞数 1

文章标签： taro 小程序前端

于 2023-04-20 16:19:26 首次发布

本文链接：https://blog.csdn.net/weixin_61570458/article/details/130269189

版权

文章介绍了在Taro框架下，父页面如何向子页面传递数据，并接收子页面回传的数据来调用方法。具体涉及Taro.navigateTo方法，事件监听onFinish，以及getOpenerEventChannel用于子页面接收父页面的数据。

摘要由CSDN通过智能技术生成

1.”父级“页面，向子页面传递数据，并接受子页面传递过来的数据同时可以使用这些数据调用方法

//引用层面

import Taro from "@tarojs/taro";
import {  gfastSysUserList} from "@/api/conference.ts";


 Taro.navigateTo({
//跳转的路由
    url: "/pages/xxxx/xxxx",
    events: {
//从跳转过去页面返回的参数
      onFinish(data, callback) {
        const { Id } = data;
        console.log("选择id为", Id);
        //返回时触发函数
        gfastSysUserList({ ids: [Number(Id)] }).then((res) => {
          console.log("人的信息", res.data);
          state.userInfo = res.data;
        });
        callback();
      },
    },
//跳转成功向跳转的页面传送参数
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit("setDefaultValues", {
        compereInfo: state.userInfo.id,
        personList: [...state.joinPerson],
      });
    },
  });

2.子页面接受父项传来的数据并且进行业务操作

import Taro from "@tarojs/taro";
import { gfastSysUserList } from "@/api/conference.ts";
const pages = Taro.getCurrentPages();
const current = pages[pages.length - 1];
const eventChannel = current.getOpenerEventChannel();




// 获取上级页面选择的人
eventChannel.on("setDefaultValues", (data) => {
  if (data.personList) {
    gfastSysUserList({ ids: [...data.personList], pageSize: "999" }).then(
      (res) => {
        console.log("res人员详情", res);
        state.personList = res.data.list;
        wx.hideLoading();
      }
    );
  }
  if (data.userInfo) {
    state.checkInfo = String(data.userInfo);
    console.log("人回显", data.userInfo);
  }
});
//页面返回给父页面的参数
const nextChoose = () => {
  const Id = state.checkInfo;
  eventChannel.emit("onFinish", { Id }, () => {
    Taro.navigateBack();
  });
};