Question

我有一个包含Vue Js实例的JS页面，其中正在导入组件。但是，我收到以下错误：

未知的自定义元素：-您是否注册了组件正确吗？对于递归组件，请确保提供“名称” 选项。

我要导入的组件的导出对象中的名称属性正确，所以我想知道是什么导致了此错误。

组件：

<template>
  <GoogleMapLoader :mapConfig="mapConfig" apiKey="YOUR_API_KEY">
    <template slot-scope="{ google, map }">
      <GoogleMapMarker
        v-for="marker in markers"
        :key="marker.id"
        :marker="marker"
        :google="google"
        :map="map"
      />
      <GoogleMapLine
        v-for="line in lines"
        :key="line.id"
        :path.sync="line.path"
        :google="google"
        :map="map"
      />
    </template>
  </GoogleMapLoader>
</template>

<script>
import GoogleMapLoader from "./GoogleMapLoader";
import GoogleMapMarker from "./GoogleMapMarker";
import GoogleMapLine from "./GoogleMapLine";
import { mapSettings } from "./mapSettings";

export default {
  name: "TravelMap",
  components: {
    GoogleMapLoader,
    GoogleMapMarker,
    GoogleMapLine
  },

  data() {
    return {
      markers: [
        { id: "here", position: { lat: 32.800359, lng: -117.021605 } },
        { id: "there", position: { lat: -51.628489, lng: -72.545818 } }
      ],
      lines: [{
        id: "1",
        path: [{ lat: 32.800359, lng: -117.021605 }, { lat: -51.628489, lng: -72.545818 }]
      }]
    };
  },

  computed: {
    mapConfig() {
      return {
        ...mapSettings,
        center: this.mapCenter
      };
    },

    mapCenter() {
      return this.markers[1].position;
    }
  }
};
</script>

import Vue from "vue";

Vue.config.productionTip = false;

import TravelMap from "./TravelMap";

new Vue({
  el: "#App",
  components: { TravelMap }
});

这也是整个代码示例的沙箱链接： https://codesandbox.io/s/yqqwwz0z1x

Answer 1

如评论之一所述，HTML中不允许使用大写字母。

您的第一个选择是将index.html中的TravelMap标签更改为WHERE

另一个选择是更改Vue实例的创建。

如果将正文内容从index.html文件更改为

<travel-map class="travel-map" />

并像这样创建您的Vue实例

<body> <div id="app" />  </body>

App.vue将是您的应用程序条目，并且在应用程序模板内，您将能够使用与导入/注册组件相同的名称。

链接到更新的沙箱：https://codesandbox.io/s/50vo260nqp

Answer 2

我最终将其更改为使用 Laravel 加载组件：

Vue.component('google-map', require('../GoogleMaps/GoogleMap').default);

new Vue({
  el: "#App"
});

注册Vue JS组件

2 个答案: