无法访问 vue js 中的道具数据?
unable to acces props data in vue js?
你好,我无法访问道具数据。如果我在 chrome vue dev 工具中看到 道具在那里,但无法在创建或安装的钩子中访问。
传递道具
<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 开发工具中看到 患者道具 在那里,但 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', {
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>
这是一个项目,向您展示如何实现您想要做的事情: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"),
},
你好,我无法访问道具数据。如果我在 chrome vue dev 工具中看到 道具在那里,但无法在创建或安装的钩子中访问。
传递道具
<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 开发工具中看到 患者道具 在那里,但 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', {
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>
这是一个项目,向您展示如何实现您想要做的事情: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"),
},