Vue应用触发“products未在实例上定义但渲染时被引用”报错如何解决

错误原因梳理 #

• App.vue 中向 Products 组件传了products属性，但 App 自身的 data 中没有定义products变量，你在 main.js 根实例定义的 products 不属于 App 组件的作用域，模板直接引用会找不到对应变量。
• Products 组件本身已经在内部定义了products响应式数据，且会在 mounted 钩子中请求接口完成赋值，完全不需要从父组件传入 products，多余的传值还会因为 Products 未声明对应 props 引发命名冲突，触发实例找不到 products 的报错。
• main.js 中已经全局注册了 Products 组件，同时又在 App.vue 中做了局部注册，重复注册没有必要，也可能引发命名异常。

修复方案 #

1. 修改App.vue，删除多余的属性绑定

<template>
  <div id="app">
        <h1>{{ msg }}</h1>
    <!-- 去掉v-bind:products绑定 -->
    <Products/>
  </div>
</template>

<script>
import Products from './components/Products.vue';
export default {
  name: 'App',
  components: {
    Products
  },
  data(){
    return{
      msg: 'Check 123'
    }
  },
}
</script>

2. 修改main.js，删除多余的全局注册和无用数据

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// 删除全局注册组件的代码和根实例无用的products定义
new Vue({
  render: h => h(App),
}).$mount('#app')

3. 可选优化：校验接口返回结构

如果接口直接返回 products 数组，没有嵌套在results字段中，需要将 Products.vue 中赋值逻辑修改为：

this.products = response.data

可以先在then回调中打印console.log(response.data)确认返回结构，避免赋值错误。

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