小编pau*_*ulc的帖子

我刚刚开始使用 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'], …