如何在Vue 2中添加组件

Question

我使用vue-cli创建了Vue 2.5.2应用程序。

我试图建立其自身的作品在我的第一个组件（<jsontree />），但我无法弄清楚如何注册的另一个组件使用（<HelloWorld>）

这是错误消息我收到：

[Vue warn]: Unknown custom element: <jsontree> - did you register the component correctly? For recursi§ve components, make sure to provide the "name" option. 

found in 

---> <HelloWorld> at src/components/HelloWorld.vue 
     <App> at src/App.vue 
     <Root> 

这是HelloWorld的模板：

<template> 
    <div> 
    <jsontree /> 
    </div> 
</template> 

它的工作原理，当我浏览到它 “直接”，THI s是我的路线文件：

import Vue from 'vue' 
import Router from 'vue-router' 
import HelloWorld from '@/components/HelloWorld' 
import JsonTree from '@/components/jsonTree' 

Vue.use(Router) 

export default new Router({ 
    routes: [ 
    { 
     path: '/', 
     name: 'Hello', 
     component: HelloWorld 
    }, 
    { 
     path: '/tree', 
     name: 'Tree', 
     component: JsonTree 
    } 
    ] 
}) 

Answer 1

您错过了<script>的一部分。

此外，在模板内部使用kebab-case编写习惯但非强制性的。

Vue的引擎负责，让您与kebab-case写在模板中，即使您在导入它作为camelCase您script

看到代码：

HelloWorld.vue

<template> 
    <div> 
    <json-tree /> 
    </div> 
</template> 

<script> 
import jsonTree from './jsonTree.vue' // or wheatever location this component is residing. 
export default { 
    components: {jsonTree} 
} 
</script>