Vue.js - 属性或方法“blah”未在实例上定义，但在渲染期间引用

Posted 2023-02-23

【中文标题】Vue.js - 属性或方法“blah”未在实例上定义，但在渲染期间引用

【英文标题】：Vue.js - Property or method "blah" is not defined on the instance but referenced during render

【发布时间】：2018-08-26 20:58:24

【问题描述】：

为什么Vue 2在父模板中静态定义的时候会抛出一个prop没有定义的错误？

注意：如果我将 javascript 带入 .vue 文件的脚本标签而不是导入它，则不会引发此错误。

错误：

“嵌入”的属性或方法未在实例上定义，而是在渲染期间引用。通过初始化该属性，确保此属性在数据选项或基于类的组件中是反应性的。见https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

loader.html

<div class="overlay">
  <div class="loader" v-bind:class=" embedded ">
    <div class="loader__items">
      <div class="loader__item"></div>
      <div class="loader__item"></div>
      <div class="loader__item"></div>
      <div class="loader__item"></div>
      <div class="loader__item"></div>
    </div>
  </div>
</div>

loader.js

export default 
  props: 
    embedded: 
      default: false,
      type: Boolean,
    ,
  ,
;

loader.vue

<template src="./loader.html"/>
<script scr="./loader.js" lang="babel"></script>
<style src="./loader.scss" lang="scss" scoped/>

client.js

import Loader from '../../loader/loader.vue';

components: 
   Loader

client.html

<loader :embedded="true" />

【问题讨论】：

究竟是什么错误？你如何将loader 导入client.js？

@Phil -> 已编辑

我尝试在data 属性中声明它，但错误完全相同:(

您的代码在没有警告的情况下运行：jsfiddle.net/quv49nwa

这可能与 vue 共享组件范围的方式有关...如果我将它放在脚本标签中，那么它是组件的新实例，它是每次导入 .vue 文件的范围？与如果我导入然后所有组件共享模块系统中的实例相反？我对 Vue 非常陌生，所以与 Redux 应用程序相比，这些位如何工作我仍然有点模糊。

【参考方案1】：

假设：

在.vue 文件的标记中使用src="./loader.js" 导入loader.js 文件时，会引发初始问题中的错误。组件对象的这个实例可能在加载器组件的每个实例之间共享，其中一些具有传入的 embedded 属性，而另一些则没有。这可能会打开对<loader /> 构造函数的其他调用的大门，而不是在实例化时写入道具的值。

解决方案：

切换到脚本标签内的导入和导出修复错误：

loader.vue

<template src="./loader.html" />
<script lang="babel">
    import loader from './loader';

    export default loader;
</script>
<style src="./loader.scss" lang="scss" scoped />

【讨论】：

很好的调试。是什么促使您将template、script 和style 移动到外部文件？有点违背单文件组件的“单文件”方面

@Phil 我只是不完全迷恋 Vue TBH 中的单文件组件。我更喜欢清晰地分离关注点，尽管我很乐意在 .js 文件中使用 JSX，但不幸的是，我正在处理的项目并不是这样编写的。另一方面，我喜欢将 CSS 放在单独的文件中。我想是个人喜好。