Vue.js - 财产或方法“blah”未在实例上定义，但在呈现期间引用 [英] Vue.js - Property or method "blah" is not defined on the instance but referenced during render

问题描述

为什么Vue 2会抛出一个错误，即在父模板中静态定义prop时未定义prop？

Why does Vue 2 throw an error that a prop is not defined when it is statically defined in the parent template?

注意：如果我没有抛出此错误将javascript带入 .vue 文件的脚本标记，而不是导入它。

Note: This error is not thrown if I bring the javascript inside the .vue file's script tag as opposed to importing it.

错误：

属性或方法embedded未在实例上定义，但在呈现期间引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是被动的。请参阅 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" />

推荐答案

假设：

使用 src =./ loader.js导入 loader.js 文件时在 .vue 文件的标记中抛出初始问题中的错误。组件对象的这个实例可能在loader组件的每个实例之间共享，其中一些实例传入了 embedded prop，而另一些则没有。这可以打开通向其他调用< loader /> 构造函数的大门，而不是在实例化时写入prop的值。

When importing the loader.js file using the src="./loader.js" in the .vue file's markup the error in the initial question is thrown. This instance of the component object might be being shared between every instance of the loader component, some of which have the embedded prop passed in and some that don't. This could open the door to other calls to the <loader /> constructor over writing the prop's value on instantiation.

解决方案：

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

Switching to an import and export inside the script tag fixes the error:

loader.vue

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

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

这篇关于Vue.js - 财产或方法“blah”未在实例上定义，但在呈现期间引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！