Nuxt 如何发送异步道具

Question

我在使用 Nuxt2.15 (Vue.js) 时遇到了问题。我想将 parent 组件的数据发送到 parent 组件获取的 child 组件。而且，我想通过使用 parent 组件中的数据从 child 组件中获取另一个数据。但是 props 数据在 child 组件中未定义。我尝试在 child 组件中使用“watch”和“computed”。但我无法让它发挥作用。如果有人能告诉我如何修复它，我将不胜感激。

Parent

<template>
  <div>
    <Child v-bind:exampleData="exampleData" />
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "Parent",
  components: {
    Child,
  },
  data() {
    return {
      exampleData: [],
    };
  },

  async created() {
    const exampleData = await fetchData();
    this.exampleData = exampleData
  },

};
</script>

Child

<template>
  <div><!-- show result data here  --></div>
</template>

<script>
export default {
  name: "Child",
  props: ["exampleData"],

  async created() {
    let abc = this.exampleData;
    // abc is undefined
    const resultData = await fetData(abc);
    this.result = resultData;
  },

  data() {
    return {
      result: [],
    };
  },

};

Answer 1

尝试使用 mounted() 方法而不是像这样的 created()：

<template>
  <div><!-- show result data here  --></div>
</template>

<script>
export default {
  name: "Child",
  props: ["exampleData"],
  async mounted() {
    let abc = this.exampleData;
    // abc is undefined
    const resultData = await fetData(abc);
    this.result = resultData;
  },
  data() {
    return {
      result: [],
    };
  },
};

但是，如果从父级传递的数据是异步的或者在某个时刻可能会被更改，我建议像这样使用 watch 属性：

<template>
  <div><!-- show result data here  --></div>
</template>

<script>
export default {
  name: "Child",
  props: ["exampleData"],
  data() {
    return {
      result: [],
    };
  },
  watch: {
   exampleData() {
     const resultData = await fetData(this.exampleData);
     this.result = resultData;
   }
  }
};

Nuxt 如何发送异步道具

Nuxt How to send async props

javascript

asynchronous

vue.js

nuxt.js