[英]Custom Component in Vue 2
I created a custom component and registered it. 我创建了一个自定义组件并进行了注册。 But I get in the browser a warning, which I cannot process. 但是我在浏览器中收到一条警告,我无法处理。 In my opinion it is properly registered? 我认为它已正确注册?
vue.js:435 [Vue warn]: Unknown custom element: - did you register the component correctly? vue.js:435 [Vue警告]:未知的自定义元素:-您是否正确注册了组件? For recursive components, make sure to provide the "name" option. 对于递归组件,请确保提供“名称”选项。
found in 在发现
---> --->
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);
}
}
});
Component 零件
<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>
Usage 用法
<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>
I see 1-2 problems here. 我在这里看到1-2个问题。
GISView
to App.vue
locally , meaning you can only use <gisview>
inside App.vue
's template. 您注册GISView
到App.vue
本地 ,这意味着你只能使用<gisview>
内App.vue
的模板。 You can register GISView
globally, like so, but i doubt you would want that. 您可以像这样在全球范围内注册GISView
,但我怀疑您会那样做。 Vue.component(GISView)
GISView.vue
? 您的第二个代码示例应该是GISView.vue
吗? If it is, you're trying to use <gisview>
within itself. 如果是这样,则您尝试在其内部使用<gisview>
。 Recursive components are a thing, but i don't think that's what you're going for here. 递归组件是一回事,但是我不认为这就是您要使用的组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.