Vuejs未知自定义元素(导入组件错误)

Question

我基本上是在一个父组件中导入2-3个组件，基于按钮点击，我只是简单地隐藏和显示一些组件。在我有后退和下一步按钮的每个组件中，当它们单击时，我会在不同的情况下显示不同的组件。下面是我的一个组件的简单示例；

<template>
  <div>
      <transition name="fade" appear> 
        <div class="justify-center">
          <form @submit.prevent="submitFormTest" v-if="!back && !configuration">
             Bunch of code here is irrelevant with my question...
           <!-- Buttons -->
          <div class="text-center mt-4">
              <button @click="back = true" class="btn-w-orange mr-2" type="button">Back</button>
              <button @click="nextButton" class="btn-w-orange" type="button">Next</button>
          </div>
          </form>

          <modalOpMode v-if="back"></modalOpMode>
          <modalConnection v-if="configuration && !back"></modalConnection >
        </div>
      </transition>
  </div>
</template>

这是我的脚本；

<script>
import modalConnection from "./modalConnection";
import modalOpMode from "./modalOpMode "

export default {
  data(){
    return {
      configuration: false,
      back: false
    }
  },
  components: {
    modalOpMode,
    modalConnection,
  },
  methods: {
    nextButton(){
      this.configuration = true;
    },
  },
}
</script>

我静态地导入了另外两个组件，以便在单击back和next按钮时显示。当我为我所有的组件点击下一步按钮时，一切都是正常的。(还有其他组件，我得到了相同的错误。)但当我单击“后退”按钮时，问题就出现了。单击“下一步”时，窗体被隐藏，modalConnection按原样可见，但当单击“上一步”时，我只看到一个空白页面，因为modalOpMode给了我以下错误；

[Vue warn]: Unknown custom element: <modalOpMode> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我非常确定我以正确的方式导入了组件，路径，组件名称，使用，所有的一切都是正常的，因为我用另一个modalConnection这样做了，而且那个都工作得很好。如果你想检查我的modalOpMode组件，它就在这里；

<template>
    <transition name="fade" appear> 
      <div>
        <form @submit.prevent="submitFormTest" v-if="configuration == ''">
         There are four radio buttons that bound with v-model to change the value of configuration variable
        </form>
        <!-- Modal Comp1-->
        <modalComp1 v-if="configuration == 'comp1'"></modalComp1>
        <!-- Modal Comp2 -->
        <modalComp2 v-if="configuration == 'comp2'"></modalComp2>
        <!-- Modal Comp3-->
        <modalComp3 v-if="configuration == 'comp3'"></modalComp3>
        <!-- Modal Comp4 -->
        <modalComp4 v-if="configuration == 'comp4'"></modalComp4 >
      </div>
    </transition>
</template>

在这里，我导入了4个其他组件，并将它们绑定到一个名为configuration的变量。当变量等于上面的comp1或comp2之类的值时，我只需显示相关的组件并隐藏其他内容。

正如我之前所说的，当我单击next按钮并显示组件时，一切正常，但我不能返回，它会给出上面的错误。我做错了什么，或者我遗漏了什么？提前感谢

Answer 1

在组件中，使用modalOperatingMode而不是modalOpMode