scope - Vue 组件未在路由器 View 中呈现

Question

最近我一直在前端使用 vue 和 vue-router 来构建 SPA。

我的问题是我无法访问主 Vue 实例中定义的组件:

import ElementComponent from './Element';

const app = new Vue({
   el: '#app',
   router,
   components: { Element: ElementComponent }
});

每当我做<element></element>在 #app 范围内，组件被渲染，但我不能在路由组件内使用该元素。

我的路线是这样定义的:

var routes = [
{ path: '/section/part', component: require('../views/Part') }];

然后提供给路由器实例:

 new VueRouter({routes});

每当我尝试调用 <element></element> 时的断点在 Part 组件模板中，我在 vuedevtools 中得到了这个:[Vue warn]: Unknown custom element: - did you register the component correctly?对于递归组件，请确保提供“名称”选项。(位于 C:\Users\Doe\project\js\views\Part.vue)

Answer 1

您需要将该组件导入到views/Part 组件中。因此，执行您在主 Vue 实例中执行的相同操作，但仅在 part 组件中执行。

我相信如果你想让组件全局化你需要使用

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

引用 https://v2.vuejs.org/v2/guide/components.html#Registration