属性 \"product\" 在渲染期间被访问但未在实例上定义答案

【问题标题】：Property "product" was accessed during render but is not defined on instance属性 \"product\" 在渲染期间被访问但未在实例上定义
【发布时间】：2022-11-22 01:40:30
【问题描述】：

很抱歉这个愚蠢的问题我是初学者，我找到了很多关于这个问题的答案，但仍然无法解决我的问题......请帮助我......

我使用 Nuxt3，只是试图将组件添加到页面，无法理解我的错误在哪里..

问题是页面过渡动画不再有效, 但分量出现了

组件ServiceCard.vue：

<template>
  <div class="w-[600px] h-[400px]">
    <img
      src="@/assets/img/online-store.png"
      alt="oleksii vratskyi - online store project"
      width="600"
      height="400"
    />

    <h5 class="font-bold text-xl text-stone-300 mt-5">Online store</h5>
  </div>
</template>

<script setup>
const { product } = defineProps(["product"])
</script>

页面portfolio.vue：

<main>
  <div class="grid grid-cols-2 place-items-center text-stone-300">
    <div> 
      <ServiceCard :card="product" /> 
    </div>

    <div> 
      <ServiceCard :card="product" /> 
    </div>
  </div>
</main>

</template>

<script>
import { ServiceCard } from '@nuxt/schema';
</script>

【问题讨论】：

portfolio.vue中没有对product的引用。

标签： nuxt.js vuejs3 instance nuxtjs3 defined

【解决方案1】：

我看到一些问题...

portfolio.vue 组件没有定义 product 变量
ServiceCard.vue 期望 product 作为 prop 传递，但 portfolio.vue 却发送了一个 card prop
不会真正引起问题，但遵循 vue 文件命名约定是个好主意。 portfolio.vue 应该有 2 个单词并且要大写。 PortfolioView.vue
你从@nuxt/schema 得到ServiceCard，这似乎不对。你确定那是定义组件的地方吗？

例子

组件ServiceCard.vue：

<template>
  <div class="w-[600px] h-[400px]">
    <img
      src="@/assets/img/online-store.png"
      alt="oleksii vratskyi - online store project"
      width="600"
      height="400"
    />

    <h5 class="font-bold text-xl text-stone-300 mt-5">Online store</h5>

    <!-- use prop if you want to include in the child component... -->
    <h1>{{product}}</h1>
  </div>
</template>

<script setup>
// if you're not using the prop, you can remove this prop definition
const { product } = defineProps(["product"])

</script>

页面PortfolioView.vue：

<main>
  <div class="grid grid-cols-2 place-items-center text-stone-300">
    <div>
      <!-- if there's no `card` prop defined, no need to send it -->
      <ServiceCard/>
    </div>

    <div>
      <!-- ...but if you do want to pass a product -->
      <ServiceCard :product="product"/>
    </div>
  </div>
</main>

</template>

<script setup>
// use ⬆setup⬆ here too if you're using setup convention

// just guessing here, but probably where your component might be
import { ServiceCard } from './components/ServiceCard .vue';

// you can define a product here if you want to pass it to the child component
const product = {
  name: "such wow?"
}
</script>

【讨论】：