Javascript Vue 2中的自定义组件

我创建了一个自定义组件并注册了它。但我在浏览器中得到一个警告，我无法处理。依我看，它是正确注册的吗

vue.js:435[vue warn]：未知自定义元素：-是否 正确注册组件？对于递归组件，请确保 提供“名称”选项

发现于

--->

Main

import GISView from './components/GISView.vue';
import VueEvents from 'vue-events';

window.Vue = Vue;
Vue.use(VueEvents)

var App = window.App = new Vue({
  el: '#app',
  components: {
    'gisview': GISView
  },
    data() {
        return {
            eventData: {
                foo: 'baz'
            }
        }
    },
  methods: {
    init: function() {
      this.$events.$emit("test", this.eventData);
    }
  }
});

组件

<template>
    <div ref="map" id="map" class="google-map" style="position: relative; overflow: hidden;">
        <div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px;">
            <gisview></gisview>
        </div>
    </div>
</template>
<script>
    import GoogleMaps from '../mixins/GoogleMaps.js';

    export default {
        mixins: [GoogleMaps],

        mounted() {
            console.log("Mounted");
            this.$events.$on('test', eventData => console.log("Fired"));
        },

        data: function() {
            return {
                eventData: {
                    foo: 'baz'
                }
            }
        },

        methods: {
            initMap: function() {
                map = new google.maps.Map(this.$els.map, {
                    center: {lat: -34.397, lng: 150.644},
                    zoom: 8
                });
            }
        }
    }
</script>

从“../mixins/GoogleMaps.js”导入谷歌地图；
导出默认值{
mixins:[谷歌地图]，
安装的（）{
控制台日志（“已安装”）；
这个.$events.on（'test'，eventData=>console.log（“Fired”）；
},
数据：函数（）{
返回{
事件数据：{
福：“巴兹”
}
}
},
方法：{
initMap:function（）{
map=新的google.maps.map（这个$els.map{
中心：{纬度：-34.397，液化天然气：150.644}，
缩放：8
});
}
}
}

用法

<div class="wrapper wrapper-content animated fadeInRight">
        <div id="app">
            <div class="row">
                <div class="col-md-7">
                    <div class="ibox">
                        <div class="ibox-title">GIS</div>
                        <div class="ibox-content">
                            <gisview></gisview>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

地理信息系统

我发现这里有1-2个问题

您在本地注册了

GISView

到

App.vue

，这意味着您只能在

App.vue

的模板中使用

。您可以像这样在全球范围内注册

GISView

，但我怀疑您是否希望这样

Vue.component（GISView）

您的第二个代码示例应该是

GISView.vue

？如果是，则您试图在其内部使用

。递归组件是一种东西，但我不认为这是你要在这里

---

我看到这里有1-2个问题

您在本地注册了

GISView

到

App.vue

，这意味着您只能在

App.vue

的模板中使用

。您可以像这样在全球范围内注册

GISView

，但我怀疑您是否希望这样

Vue.component（GISView）

您的第二个代码示例应该是

GISView.vue

？如果是，则您试图在其内部使用

。递归组件是一种东西，但我不认为这是你要在这里