在vue.js中写一段代码传递数据给子组件是否正确？

Question

我有一个问题。 我将 vue.js 与 defineComponent 一起使用。

我想获取数据并将数据传递给子组件，但数据未定义。

家长

<template>
  <Child :data="user"/>
  <div>{{ user.name }}</div> <!-- It works here -->
</template>

export default defineComponent({
  setup() {
    const user = ref({});
    const getData = () => {
      // takes 3 seconds
      user.value = data;
    }
    return {user}
  }
})

孩子

<template>
  <div>{{ user.name }}</div> <!-- TypeError Cannot read properties of undefined -->
</template>

export default defineComponent({
  props: {
    data: { type: Object },
  },
  setup(props) {
    const user = ref(props.data);
    return {user}
  }
})

如果我在子组件中使用 watch，它会起作用。 这样写代码对吗？

孩子

export default defineComponent({
  props: {
    data: { type: Object },
  },
  setup(props) {
    const user = ref({});
    watch(props, (n, o) => user.value = props.data)
  }
})

Answer 1

在您的情况下，因为您有 3 秒的时间来获取数据，所以这种方法是正确的。

问题是子组件试图在数据实际可用之前访问数据。这是因为父组件中的

getData()

函数需要 3 秒才能完成，而在此期间，

user

对象仍然是空的。创建子组件时，它会在填充数据之前尝试访问

user

对象，结果会出现错误。