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
的模板中使用<gisview>
。你可以在全球范围内注册GISView
,就像这样,但我怀疑你会想要那个。
Vue.component(GISView)
-
您的第二个代码示例应该是
GISView.vue
吗?如果是,您正在尝试在其内部使用<gisview>
。递归组件是一回事,但我认为这不是你想要的。
【讨论】:
以上是关于Vue 2 中的自定义组件的主要内容,如果未能解决你的问题,请参考以下文章
Vue:从自定义组件派生的自定义组件中的 v-model 和输入事件
VSCode(Vetur) 无法识别组件中的自定义 Vue 属性
未知的自定义元素: - 您是不是正确注册了组件? default.vue Jest 中的 <nuxt /> 组件出错