Vue 2 中的自定义组件

Posted

技术标签:

【中文标题】Vue 2 中的自定义组件【英文标题】:Custom Component in Vue 2 【发布时间】:2017-10-09 08:19:30 【问题描述】:

我创建了一个自定义组件并注册了它。但是我在浏览器中收到一个警告,我无法处理。我认为它已正确注册?

vue.js:435 [Vue 警告]:未知的自定义元素:- 你有吗 正确注册组件?对于递归组件,请确保 提供“名称”选项。

发现于

--->

主要

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>

【问题讨论】:

【参考方案1】:

我在这里看到了 1-2 个问题。

    您将GISView注册到App.vue本地,这意味着您只能在App.vue的模板中使用&lt;gisview&gt;。你可以在全球范围内注册GISView,就像这样,但我怀疑你会想要那个。

Vue.component(GISView)

    您的第二个代码示例应该是GISView.vue 吗?如果是,您正在尝试在其内部使用&lt;gisview&gt;。递归组件是一回事,但我认为这不是你想要的。

【讨论】:

以上是关于Vue 2 中的自定义组件的主要内容,如果未能解决你的问题,请参考以下文章

Vue:从自定义组件派生的自定义组件中的 v-model 和输入事件

VSCode(Vetur) 无法识别组件中的自定义 Vue 属性

未知的自定义元素: - 您是不是正确注册了组件? default.vue Jest 中的 <nuxt /> 组件出错

Vue的自定义组件之间的数据传递

Laravel 5.6.7 和 Vue.js 中的自定义错误消息,尤其是组件

Vue JS - vue 组件上的自定义属性会导致 TS 错误