Vue js 子组件中未定义的 props。但仅在其脚本中

Question

我刚刚开始使用 Vue 并经历了一些意想不到的行为。在将道具从父组件传递到子组件时，我能够访问子组件模板中的道具，但不能访问子组件的脚本。但是，当我在父模板（主 div）中使用 v-if 指令时，我能够访问子脚本和子模板中的 prop。我将不胜感激这里的一些解释，是否有更好的结构这段代码？请参阅下面的代码。谢谢。

父组件：

<template>
<div v-if="message">
<p>
{{ message.body }}
</p> 
<answers :message="message" ></answers>
</div>
</template>

<script>
  import Answers from './Answers';
  export default {
    components: {
      answers: Answers
    },
    data(){
      return {
        message:""
      }
    },
    created() {
      axios.get('/message/'+this.$route.params.id)
        .then(response => this.message = response.data.message);
    }
  }
</script>

子组件

<template>
  <div class="">
  <h1>{{ message.id }}</h1> // works in both cases
  <ul>
    <li v-for="answer in answers" :key="answer.id">
      <span>{{ answer.body }}</span>      
    </li>
  </ul> 
  </div>
</template>

<script>
  export default{
    props:['message'],    
    data(){
      return {
        answers:[]
      }
    },    
    created(){
      axios.get('/answers/'+this.message.id) //only worls with v-if in parent template wrapper
        .then(response => this.answers = response.data.answers);
    }
  }
</script>

Answer 1

this.message.id只适用于v-if因为有时 message不是一个对象。

您在父组件中进行的用于检索消息对象的调用是异步的。这意味着在子组件加载之前调用尚未完成。因此，当您的子组件加载时，message="". 那不是一个具有id属性的对象。当message=""您尝试执行时this.message.id，您会收到错误，因为没有id字符串的属性。

您可以继续使用v-if，这可能是最好的，或者阻止子组件中的 ajax 调用在message不是对象时执行，同时将其移动到updated。