Регистрация компонента Vue JS - PullRequest
Новая
       25

Регистрация компонента Vue JS

0 голосов
/ 05 апреля 2019

У меня есть страница JS с экземпляром Vue Js, в которую я импортирую компонент. Однако я получаю следующую ошибку:

Неизвестный пользовательский элемент: - вы зарегистрировали компонент правильно? Для рекурсивных компонентов обязательно укажите «имя» опция.

Атрибут name является правильным в объекте экспорта компонента, который я импортирую, поэтому мне интересно, что вызывает эту ошибку.

Компонент: 

<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

Ответы [ 2 ]

0 голосов
/ 06 апреля 2019

В итоге я изменил его, чтобы загрузить компонент, используя Laravel вместо: 

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

new Vue({
  el: "#App"
});
0 голосов
/ 05 апреля 2019

Как указано в одном из комментариев, в HTML не допускается использование заглавных слов.

Первым вариантом было бы просто изменить тег TravelMap в index.html на <travel-map class="travel-map" />

Другой вариант - изменить создание экземпляра Vue.

Если вы измените содержимое тела из файла index.html на

<body> <div id="app" /> <!-- built files will be auto injected --> </body>

и создайте свой Vue instace, как это

new Vue({ el: "#app", template: "<App/>", components: { App } });

App.vue будет записью вашего приложения, а внутри шаблона приложения вы сможете использовать то же имя, что и для импорта / регистрации компонента.

Ссылка на обновленную песочницу: https://codesandbox.io/s/50vo260nqp

...