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

Posted 2023-02-23

【中文标题】Vue js 子组件中未定义的道具。但仅在其脚本中

【英文标题】：Undefined props in Vue js child component. But only in its script

【发布时间】：2017-12-03 11:32:08

【问题描述】：

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

父组件：

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

【参考方案1】：

this.message.id 仅适用于 v-if，因为有时 message 不是对象。

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

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

【讨论】：

啊，我明白了。谢谢你的解释，伯特把事情搞清楚了。非常感激。将在您的建议中坚持使用 v-if 指令。