Vue报Property XXX was accessed during render错 父子组件传值失效如何解决

你遇到的报错本质原因是：子组件模板中访问的title、langInfo等属性，既没有在子组件内正确声明，也没有从父组件传递到子组件，Vue找不到对应属性值就抛出了该报错。
具体需要修改三处问题： #

1. 父组件未向子组件传递props #

你在父组件的v-for循环中只调用了<Project />，没有把遍历得到的项目数据传给子组件，修改父组件模板对应代码：

<div class="col" v-for="(project, index) in projects" :key="index">
  <!-- 把遍历得到的project对象传递给子组件 -->
  <Project :project="project" />
</div>

2. 子组件props定义错误、模板取值不匹配 #

你当前子组件的props声明格式不符合Vue规范，同时模板直接写{{title}}没有对应到props层级，推荐以下修复方案：
修改子组件的props声明，接收完整的project对象：

export default {
  name: "Project",
  props: {
    // 声明接收父组件传过来的project对象
    project: {
      type: Object,
      required: true
    }
  },
};

对应修改子组件模板，所有属性都从project对象中取值：

<template>
  <div class="project">
    <div class="card" style="width: 18rem">
      <img
        src="https://images.unsplash.com/photo-1597838816882-4435b1977fbe?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2049&q=80"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">{{ project.title }}</h5>
        <h6 class="card-lang-info">Written with {{ project.langInfo }}</h6>
        <p class="card-text">
          {{ project.description }}
        </p>
      </div>
      <div class="card-body">
        <a :href="project.codeLink" class="card-link"><i class="bi bi-github"></i></a>
        <a v-if="project.title === 'Portfolio'" class="card-link project-link"
          ><i class="bi bi-link-45deg"></i
        ></a>
        <a v-else :href="project.siteLink" class="card-link project-link"
          ><i class="bi bi-link-45deg"></i
        ></a>
      </div>
    </div>
  </div>
</template>

3. 修复子组件模板的语法错误 #

原代码中v-if="(title = Portfolio)"存在两处错误：

• 单个=是赋值操作，判断相等需要用===
• 字符串值Portfolio没有加引号，会被Vue当成实例属性查找，触发额外报错
  上面的模板代码已经同步修复了该问题。

内容的提问来源于stack exchange，提问作者AidanGregory