问题描述
为什么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.
错误:
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”未在实例上定义,但在呈现期间引用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!