[英]Unable to pass props to the child component in Vue js
I spent almost 2 hours figuring out but I am not getting what am I doing wrong.我花了将近 2 个小时来弄清楚,但我没有明白我做错了什么。 I am simply getting data in my parent component and then passing it to my child component and in my child component I am using props to get that component but I am not getting anything.
我只是在我的父组件中获取数据,然后将其传递给我的子组件,在我的子组件中,我使用道具来获取该组件,但我没有得到任何东西。 FYI I am receiving all of my data in my parent component if I console.log it's just not in my child component.
仅供参考,如果我 console.log 它不在我的子组件中,我将在我的父组件中接收我的所有数据。
This is my Parent component:这是我的父组件:
<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>
This is the script of my child component: (this is the only thing you need since this is giving the problem)这是我的子组件的脚本:(这是您唯一需要的,因为这是问题所在)
<script>
export default {
props: ["studies"],
};
console.log(studies); //This line is an error
</script>
Thank you for solving the problem.感谢您解决问题。
The issue is that you're accessing the props outside of the method or life cycle hooks.问题是您正在访问方法或生命周期挂钩之外的道具。
<script>
export default {
props: ["studies"],
mounted() {
console.log(this.studies);
}
};
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.