Vue出现did you register the component correctly?解决方案

Vue.component('child-component', ChildComponent);
Vue.component('other-child-component', OtherChildComponent);

import ChildComponent from './ChildComponent.vue';
import OtherChildComponent from './OtherChildComponent.vue';

export default {
  components: {
    ChildComponent,
    OtherChildComponent
  },
  // ...
};

export default {
  name: 'RecursiveComponent',
  // ...
};

<template>
  <div>
    <child-component :count="count" @increment="incrementCount" />
    <other-child-component :count="count" />
  </div>
</template>

// 父组件 App.vue
<template>
  <div id="app">
    <ChildComponent :count="count" @increment="incrementCount" />
    <OtherChildComponent :count="count" />
  </div>
</template>

<script>
import OtherChildComponent from "./components/OtherChildComponent.vue";
import ChildComponent from "./components/ChildComponent.vue";
export default {
  data() {
    return {
      count: 0,
    };
  },
  components: {
    ChildComponent,
    OtherChildComponent,
  },
  methods: {
    incrementCount() {
      this.count++;
    },
  },
};
</script>

</script>


// 子组件1 ChildComponent.vue
<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script>
export default {
  props: ["count"],
  methods: {
    increment() {
      this.$emit("increment");
    },
  },
};
</script>


// 子组件2 OtherChildComponent.vue
<template>
  <div>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  props: ['count']
};
</script>