[Vue3 + echarts] props传异步数据问题

最新推荐文章于 2025-07-12 11:00:18 发布

原创最新推荐文章于 2025-07-12 11:00:18 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

vue 专栏收录该内容

2 篇文章

订阅专栏

博客讲述了在Vue3中遇到的一个问题：父组件通过axios异步获取数据并处理后传递给子组件，但子组件无法通过props正确接收到。作者发现只有在ref中和onMounted中分别进行一次axios请求，才能使子组件接收到处理后的数据。这个离谱的解决办法虽然奏效，但并不理想。文章讨论了这一不寻常的解决策略。

今天用 v3+echarts 写时遇到一个难题：父组件中通过 axios 获取数据，然后在父组件中加工一下传给子组件（图表组件），子组件通过 props 接收。

问题就出在似乎异步获取数据后子组件不能通过 setup 的 props 参数正确获取处理后的数据（已经配置好了props项），数据仍然为初始的空数组[]。

然后就突发奇想写出了一个很离谱的写法，竟然还成功了，

setup() {
    let data = ref(
      (() => {
        axios
          .get("./static/data.json")
          .then((res) => {
            return res.data;
          })
          .catch((err) => {
            console.log(err.message);
          });
      })()
    );

    onMounted(() => {
      axios
        .get("./static/data.json")
        .then((res) => {
          data.value = res.data;
        })
        .catch((err) => {
          console.log(err.message);
        });
    });

    const getFromData = (keyName) => {
      let arr = [];
      data.value.forEach((item) => {
        for (const key in item) {
          if (Object.hasOwnProperty.call(item, key)) {
            if (key == keyName) arr.push(item[key]);
          }
        }
      });
      return arr;
    };
    let sleep_time = computed(() => getFromData("sleep_time"));
    let run_distance = computed(() => getFromData("run_distance"));
    let sport_time = computed(() => getFromData("sport_time"));
    let step_number = computed(() => getFromData("step_number"));
    let study_time = computed(() => getFromData("study_time"));
    let recreate_time = computed(() => getFromData("recreate_time"));
    let expense = computed(() => getFromData("expense"));
    let mood = computed(() => getFromData("mood"));
    return {
      data,
      sleep_time,
      run_distance,
      sport_time,
      step_number,
      study_time,
      recreate_time,
      expense,
      mood,
    };
  },

ref 里面写了一个立即执行函数，里面 axios 请求一下数据，然后之后 onMounted 里再请求一次，就可以了。少一步都不行，真的离谱。