2017-10-20 138 views
0

我使用vue-cli創建了Vue 2.5.2應用程序。如何在Vue 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 
    } 
    ] 
}) 

回答

1

您錯過了<script>的一部分。

此外,在模板內部使用kebab-case編寫習慣但非強制性的。

Vue的引擎負責,讓您與kebab-case寫在模板中,即使您在導入它作爲camelCasescript

看到代碼:

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>