无法访问 vue js 中的道具数据？

问题描述

嗨，我无法访问道具数据。如果我在 chrome vue 开发工具 中看到有道具但无法在创建或安装的钩子中访问。

传递道具

 <ConTradiction 
   :patient="patient" 
   @openForm="toggleFormTable">
 </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 
  },

我不知道是什么原因当我在 chrome 开发工具中看到 patient props 在那里但不在 console.log 中。

解决方法

从注释中澄清 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',data() { return { patient_id: this.patient.id } }
});

new Vue({
  el: '#app',});

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

这是一个向您展示如何实现您想要做的项目的项目：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"),},

async.js javascript vue.js