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

Question

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

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

错误：

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

加载器.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>

加载器.js

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

加载器.vue

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

客户端.js

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

components: {
   Loader
}

客户端.html

<loader :embedded="true" />

Answer 1

假设：

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

解决方案：

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

加载器.vue

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

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