注册Vue JS组件
我有一个带有Vue JS实例的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
Stack Overflow用户
发布于 2019-04-06 06:50:17
最后，我将其更改为使用Laravel加载组件：
Vue.component('google-map', require('../GoogleMaps/GoogleMap').default);
new Vue({
el: "#App"
});Stack Overflow用户
发布于 2019-04-05 08:59:48
正如其中一个注释所述，HTML中不允许使用高级语言。
您的第一个选择是将TravelMap标记在index.html中更改为<travel-map class="travel-map" />
另一种选择是更改Vue实例创建。
如果将主体内容从index.html文件更改为
<body> <div id="app" /> <!-- built files will be auto injected --> </body>
然后像这样创建您的Vue实例
new Vue({ el: "#app", template: "<App/>", components: { App } });
App.vue将是您的应用程序条目，在应用程序的模板中，您将能够使用与导入/注册组件相同的名称。
链接到更新的沙箱：https://codesandbox.io/s/50vo260nqp
https://stackoverflow.com/questions/55526042
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号