Vue js child 组件中未定义的道具。但仅在其脚本中

Question

我刚开始使用 Vue 并遇到了一些意外行为。在将道具从 parent 传递到 child 组件时，我能够访问 child 模板中的道具，但不能访问 child 的脚本。但是，当我在 parents 模板（master div）中使用 v-if 指令时，我能够在 child 脚本和 [=20] 中访问道具=] 模板。我会很感激这里的一些解释，是否有更好的结构这段代码？请参阅下面的代码。谢谢。

Parent 分量：

<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>

Child 组件

<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，这可能是最好的，或者当 message 不是对象时阻止在您的子组件中执行 ajax 调用，同时将其移动到updated.

Vue js child 组件中未定义的道具。但仅在其脚本中

Undefined props in Vue js child component. But only in its script

vue.js

vue-component

vuejs2