Question

我花了将近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>

感谢您解决问题。

Answer 1

问题是您正在方法或生命周期挂钩之外访问道具。

<script>
export default {
  props: ["studies"],
  mounted() {
    console.log(this.studies); 
  }
};
</script>

无法将道具传递给Vue js中的子组件

1 个答案: