Question

我刚开始使用Vue并遇到了一些意想不到的行为。在将道具从父组件传递到子组件时，我能够访问子模板中的prop，但不能访问子组件的脚本。但是，当我在父模板（master 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。

Vue js子组件中未定义的道具。但只有在它的脚本中

1 个答案: