为什么我不能第二次将组件导入 VUE？答案

【问题标题】：Why can't I import a component into VUE a second time?为什么我不能第二次将组件导入 VUE？
【发布时间】：2021-02-02 10:44:51
【问题描述】：

这是我项目的结构

src
  components
         create.vue
         resume.vue
         service.vue
  shared
         header.vue
         menu.vue
         loader.vue
         footer.vue

这是我的加载器组件

<template>
    <div class="three col">
        <!-- <div class="loader" id="spinner"></div> -->
        <div class="loader" id="spinner-2">
          <span></span>
          <span></span>
          <span></span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Loader',
    
}
</script>

我已将它导入并在我的组件 create.vue 上运行

<template>
              <div v-show="formInfo.selectedId != ''">
                <h1 class="title">What's the name of your
                  <span>{{idName}}</span> ?
                </h1>
                <input
                type="text"
                class="form-control"
                v-model="formInfo.name"
                @keypress="onChangeName($event)"
                @keyup="onChangeName($event)"
                />
                <div class="loader-spinner" v-if="loading">
                  <ciev-app-loader>
                </div>
              </div>

</template>
<script>
import Loader from '../shared/loader.vue'

export default {
  data() {
    return {
      step: 1,
      specieName: "",
      breedName: "",
      animalName: "",
      breedId: 0,
      imageSelected: false,
      isFormCompleted: false,
      isBreedSelected: false,
      loading: false,
      isLoaderFinished: false,
      myTimeout: 0
    };
  },
  components: {
    'ciev-app-loader': Loader
  },

到目前为止一切正常，但现在我想在我的组件 resume.vue 中重用组件 Loader。我导入它并在模板中声明如下

<template>
      <div
        v-show="!displayUnknown"
        class="column"
        v-bind:class="{ paymentIsActive: 'payment' === selectedResume }"
        @click="onClickResume('payment')"
      >
        <label>
          <input
            type="radio"
            name="selectedResume"
            value="payment"
            v-model="selectedResume"
          />
          <i class="icon-card"></i>
        </label>
      </div>

    <div class="loader-spinner">
      <ciev-app-loader />
    </div>




</template>

<script>
import globalAxios from "axios";
import { isMobile } from "mobile-device-detect";
import Config from "./../../config.js";
import FileSaver from 'file-saver';
import { saveAs } from 'file-saver';
import Loader from '../shared/loader.vue'

export default {
  data() {
    return {
      step: 3,
      selectedResume: "",
      selectedCremationService: null,
      focusService: undefined,
      selectedServicePrice: 0.0,
      displayResume: false,
      displayUnknown: false,
      offer: "unknown",
      isMobile: isMobile ? true : false,
    };
  },
  components: {
    'ciev-app-loader': Loader
  },
</script>

Loader 组件未显示在模板中，尽管在浏览器中检查元素确实会加载它，并且它通过控制台向我返回以下错误 "[Vue warn]: Unknown custom element: - 您是否正确注册了组件？对于递归组件，请确保提供“name”选项。”

查看引用相同的错误，我在导出时已经在组件porpio上声明了名称，但我认为我已经在Loader中完成了它。我做错了什么？

提前感谢大家的时间和帮助。

【问题讨论】：

尝试在沙箱中重新创建您的代码，一旦我修复了所有语法错误，它似乎就可以工作了。最可能的罪魁祸首是resume.vue 末尾缺少花括号，但您也没有关闭花括号和loader.vue 中的脚本标签，它在<ciev-app-loader> 抱怨最后没有'/' .

标签： javascript vue.js import components

【解决方案1】：

resume.vue 组件中的根 <div> 似乎关闭不正确。更正它并重试。


 <div
        v-show="!displayUnknown"
        class="column"
        v-bind:class="{ paymentIsActive: 'payment' === selectedResume }"
        @click="onClickResume('payment')"
      >
        <label>
          <input
            type="radio"
            name="selectedResume"
            value="payment"
            v-model="selectedResume"
          />
          <i class="icon-card"></i>
        </label>

    <div class="loader-spinner">
      <ciev-app-loader />
    </div>
</div>

【讨论】：

另外，script 部分中缺少花括号。

【解决方案2】：

仔细检查我的代码，错误是除了在脚本中声明带有导入组件声明的组件对象外，我在脚本末尾将其重复声明为空对象，这会产生错误。感谢您的帮助

【讨论】：