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>

如何在Vue 2中添加组件

1 个答案: