Vue3 の親子コンポーネントはピット ポイントで値ステップを渡します。親コンポーネントはデータを非同期で取得し、子コンポーネントはデータを受け取りますが、レンダリングはしません。

Vue の親子コンポーネントがピットポイントを踏んで値を渡す - 親コンポーネントが非同期でデータを取得する場合

在新手开发Vue项目时，很有可能会遇到这个问题，因此笔者在此做个简单记录，以供今后新手避坑

1. 親コンポーネントはデータを非同期で取得します
注意：本文写法为vue3
。

const id=ref<number>(1)
const project=ref<string>()
//注意getProjecInfo为API接口
onMounted(async () => {
    
    
  project.value = await getProjecInfo(id.value)
  }
  ）

2. サブコンポーネント

//子组件通过
const props = defineProps<{
    
    
  getProjecInfo: string   //子组件接收
}>()
//解构赋值
const {
    
     getProjecInfo} = toRefs(props)

3. 親コンポーネントで非同期に取得した値を監視して子コンポーネントで使用する場合の解決策（監視監視を利用するのがポイント）

watch(
  () => getProjecInfo.value,
  () => {
    
    
    console.log(getProjecInfo.value)
    //你的逻辑操作，比如将值赋值给你子组件的变量中
    .......
  },
  {
    
     deep: true }
)

上記でこの問題は解決しました。主な理由は、親コンポーネントが取得したデータが非同期であるためです。それを子コンポーネントに渡すとき、子コンポーネントはレンダリングされている可能性が高いため、子コンポーネントは値を受け取っているにもかかわらず、データはレンダリングされていません。時計で値を監視して操作してください。