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

Question

为什么 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" />

Answer 1

假设:

导入 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 />