如何在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>

當我“直接”導航到它時，它起作用，這是我的路線文件：

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>