如何解决无法将道具传递给Vue js中的子组件
我花了将近2个小时来弄清楚,但我没有弄错我在做什么。我只是在父组件中获取数据,然后将其传递给子组件,在子组件中,我正在使用道具来获取该组件,但我什么也没得到。仅供参考,如果我console.log不在我的子组件中,我将在我的父组件中接收所有数据。
这是我的父级组件:
<template>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="about2">
<h1>What I do</h1>
<StudyCard :studies="data.studycards" />
</div>
</div>
</div>
</div>
</template>
<script>
import StudyCard from "@/components/StudyCard.vue";
import data from "../assets/data.json";
export default {
components: {
StudyCard,},data() {
return {
data,};
},};
console.log(data.studycards);
</script>
这是我的子组件的脚本:(这是您唯一需要的东西,因为这会带来问题)
<script>
export default {
props: ["studies"],};
console.log(studies); //This line is an error
</script>
感谢您解决问题。
解决方法
问题是您正在方法或生命周期挂钩之外访问道具。
<script>
export default {
props: ["studies"],mounted() {
console.log(this.studies);
}
};
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。