为什么 Vue 2 在父模板中静态定义了一个 prop 时会抛出一个 prop 未定义的错误?
注意:如果我将 javascript 放入 .vue
文件的脚本标记中而不是导入它,则不会抛出此错误。
错误:
Property or method "embedded" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property. See https://v2.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.js
时使用 src="./loader.js"
的文件在.vue
文件的标记引发了初始问题中的错误。组件对象的这个实例可能在加载器组件的每个实例之间共享,其中一些具有 embedded
Prop 通过了,有些则没有。这可能会打开对 <loader />
的其他调用的大门。构造函数在实例化时重写 prop 的值。
解决方案:
切换到脚本标签内的导入和导出修复了错误:
loader.vue
<template src="./loader.html" />
<script lang="babel">
import loader from './loader';
export default loader;
</script>
<style src="./loader.scss" lang="scss" scoped />
关于javascript - Vue.js - 属性或方法 "blah"未在实例上定义但在渲染期间被引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49343666/