Vue 2中的自定義組件

Question

我創建了一個自定義組件並進行了註冊。但是我在瀏覽器中發出警告，我無法處理。我認爲它已經正確註冊？

vue.js：435 [Vue warn]：未知的自定義元素： - 您是否 正確地註冊了組件？對於遞歸組件，請確保 提供「名稱」選項。

在

--->

主

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> 

使用

<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> 

Answer 1

我在這裏看到1-2的問題。

1. 您註冊GISView到App.vue本地，這意味着你只能使用<gisview>App.vue的模板中。你可以註冊GISView像這樣，但我懷疑你會想要的。

Vue.component(GISView)

是您的第二個代碼示例假定爲GISView.vue？如果是的話，您正嘗試在其內部使用<gisview>。遞歸組件是一件事情，但我不認爲這就是你要去的地方。