在Vue中，组件应该在哪里引入？

Question

我是一位有用的助手，可以为您进行文本翻译。

刚接触Vue，正在从命令行中的脚手架项目中工作。目前我有：

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home

from '../components/home'



Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

main.js

import Vue from 'vue'
import App from './App'
import router from './router'


Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  // default styles are here
}
</style>

还有 home.vue

<template>
    <chart-component></chart-component>
</template>
// rest of home

我正在尝试创建并导入 chart-component.vue 以在 home.vue 中使用，但不确定要在哪里导入它。我尝试将其添加到 main.js 和 App.vue 中，但都没有成功。

chart-component.vue

<template>
    <div>
        <h1>Testing Chart Component</h1>
    </div>
</template>

<script>
    export default {
        name: 'chart',
        data() {
            return {

            }
        }
    }
</script>

这似乎是一个简单的问题，但不确定如何解决。我最好的猜测是在App.vue中导入它，并在name下面添加components { ChartComponent }。第二次尝试是在main.js中导入它，并将ChartComponent放在components: { App, ChartComponent }中。

- Vincent Nguyen

---

可能是 Vue.js 加载单文件组件 的重复问题。 - thanksd

Answer 1

我建议将你的组件名从 chart-component 改为 ChartComponent，因为破折号不是受支持的字符。Vue 会根据需要正确地将名称转换为破折号，但在搜索组件时使用一致的名称会更方便。

无论如何，要使用组件，你需要先导入并定义它。

home.vue:

<template>
    <ChartComponent></ChartComponent>
</template>

<script>
import ChartComponent from './ChartComponent';

export default {
  components: {
    ChartComponent
  }
}
</script>

- Daniel

Answer 2

已经解决了。由于我只需要在home.vue组件内部使用它，因此我在那里导入了它，在数据下添加了它。

components: {
    'chart-component': ChartComponent
}

- Vincent Nguyen

Answer 3

在Vue 3 script setup SFCs中，导入组件变得更加容易。

<script setup>
  import ChartComponent from './components/ChartComponent.vue'
</script>

<template>
    <ChartComponent />
</template>

- Ahmad Moghazi