Vue3移除script中setup后Map组件消失问题排查求助

问题原因 #

你把父组件从<script setup>改成选项式API后，忘记在组件选项中注册导入的Map组件：

• <script setup>会自动注册所有导入的组件，所以之前的代码能正常渲染Map；
• 选项式API中，必须显式在components选项里声明要使用的组件，否则Vue会把模板中的<Map>当成普通HTML标签处理，不会渲染组件内容。

解决办法 #

在父组件的export default中添加components选项，注册Map组件即可：

<template>
  <v-app>
    <v-main>
      <Map :features="features" />
      <v-btn>Submit</v-btn>
    </v-main>
  </v-app>
</template>

<script>
import Map from '@/components/Map.vue';
export default {
  // 新增组件注册
  components: { Map },
  data() {
      return {
          features: []
      }
  },
  methods: {
      submit() {
          console.log("clicked submit")
      }
  }
}
</script>

额外优化建议 #

你的Map组件中props的定义不符合Vue3规范，可能引发潜在问题，建议修正：

<script>
import { ref, inject } from "vue";
export default {
  setup() {
    const center = ref([40, 40]);
    const zoom = ref(8);
    const rotation = ref(0);

    return {
      center,
      zoom,
      rotation,
    };
  },
  data() {
      return {
          draw: true,
          modify: false,
      }
  },
  props: {
      // 修正：指定类型+用工厂函数返回默认数组（避免引用类型共享）
      features: {
        type: Array,
        default: () => []
      }
  },
  methods: {
      setToModify() {
          this.draw = false;
          this.modify = true;
      },
      clear() {
          this.draw = true;
          this.modify = false;
          this.drawnFeatures = [];
      },
  },
};
</script>

内容的提问来源于stack exchange，提问作者wfgeo