无法访问Vue.js中的props数据

Question

我无法访问道具数据。当我在 Chrome 中打开 Vue DevTools 选项卡时，道具在那里，但我仍然无法从

created

或

mounted

挂钩访问它们。

父组件

 <Contradiction 
   :patient="patient" 
   @openForm="toggleFormTable">
 </Contradiction>

Contradiction

组件

name: "Contradiction",
  props: {
    patient: {
      type: Object,
    },
  },
  data() {
    return {
      patient_id: this.patient.id,
    };
  },
  created() {
    console.log("created hook", this.patient); // shows null
  },
  mounted() {
    console.log("mounted hook", this.patient); //shows null 
  },

我不知道为什么，但是

patient

属性确实出现在 DevTools 的 Vue 选项卡中，但在将它们传递给

console.log

时却没有出现：

Answer 1

从注释中澄清

patient

不是直接在父组件中设置后，您可以将

patient_id

定义为

computed

属性：

const Contradiction = Vue.component('contradiction', {
  template: '#contradiction',
  props: { patient: { type: Object } },
  computed: {
    patient_id() { if(this.patient) return this.patient.id; }
  }
});

new Vue({
  el: '#app',
  components: { Contradiction },
  data() { return { patient: null } },
  mounted() { setTimeout(() => this.patient = {id:1}, 3000); },
  methods: {
    toggleFormTable() {}
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
     <Contradiction :patient="patient" @openForm="toggleFormTable"/>
  </div>
</div>

<template id="contradiction">
  <div>patient id: {{patient_id}}</div>
</template>

更好的解决方案是保留您的实现，并且仅在设置了

prop

时才渲染子组件：

const Contradiction = Vue.component('contradiction', {
  template: '#contradiction',
  props: { patient: { type: Object } },
  data() { return { patient_id: this.patient.id } }
});

new Vue({
  el: '#app',
  components: { Contradiction },
  data() { return { patient: null } },
  mounted() { setTimeout(() => this.patient = {id:1}, 3000); },
  methods: {
    toggleFormTable() {}
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
     <Contradiction v-if="patient" :patient="patient" @openForm="toggleFormTable"/>
  </div>
</div>

<template id="contradiction">
  <div>patient id: {{patient_id}}</div>
</template>

Answer 2

这是一个项目，向您展示如何实现您想要做的事情：https://codesandbox.io/s/focused-hugle-3c9cc?file=/src/App.vue

为了详细解释我之前的评论，我们使用

v-if="Object.entries(patient).length"

来确保在加载任何内容之前数据就在这里。

<contradiction
  v-if="Object.entries(patient).length"
  :patient="patient"
></contradiction>

延迟加载组件在性能方面也是一件好事：

components: {
  Contradiction: () => import("./components/contradiction"),
},