[英]Custom Component in Vue 2
我创建了一个自定义组件并进行了注册。 但是我在浏览器中收到一条警告,我无法处理。 我认为它已正确注册?
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-2个问题。
GISView
到App.vue
本地 ,这意味着你只能使用<gisview>
内App.vue
的模板。 您可以像这样在全球范围内注册GISView
,但我怀疑您会那样做。 Vue.component(GISView)
GISView.vue
吗? 如果是这样,则您尝试在其内部使用<gisview>
。 递归组件是一回事,但是我不认为这就是您要使用的组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.