無法將道具傳遞給Vue js中的子組件

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>