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