javascript 在 Vue 中导入组件的位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50607228/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Where to import component in Vue?
提问by Vincent Nguyen
New to Vue, working off a scaffolded project from the command line. Currently I have:
Vue 新手，从命令行处理脚手架项目。目前我有：
index.js
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
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
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
// default styles are here
}
</style>
And home.vue
和 home.vue
<template>
<chart-component></chart-component>
</template>
// rest of home
I am trying to create and import chart-component.vueto use inside home.vuebut not sure where to import it at. I've tried adding it in main.jsand App.vueunsuccessfully.
我正在尝试创建和导入chart-component.vue以在内部使用，home.vue但不确定在何处导入。我试着将它main.js和App.vue失败。
chart-component.vue
chart-component.vue
<template>
<div>
<h1>Testing Chart Component</h1>
</div>
</template>
<script>
export default {
name: 'chart',
data() {
return {
}
}
}
</script>
This seems like a simple problem but unsure how to solve it. My best guess was importing it inside App.vueand adding a components { ChartComponent }underneath the name. Second attempt was importing it into main.jsand putting ChartComponentinside components: { App, ChartComponent }.
这似乎是一个简单的问题，但不确定如何解决。我最好的猜测是将它导入内部App.vue并components { ChartComponent }在name. 第二次尝试将其导入main.js，并把ChartComponent里面components: { App, ChartComponent }。
回答by Daniel
I would rename your component to ChartComponentfrom chart-component, as the dash is not a supported character. Vue will properly convert the name to dashes as needed, but when you're searching your code for components, it helps to have consistent names.
我会将您的组件重命名为ChartComponentfrom chart-component，因为破折号不是受支持的字符。Vue 会根据需要正确地将名称转换为破折号，但是当您在代码中搜索组件时，拥有一致的名称会很有帮助。
anyway. for using a component, you need to import it and define it first
反正。要使用组件，您需要先导入并定义它
home.vue:
家庭.vue：
<template>
<ChartComponent></ChartComponent>
</template>
<script>
import ChartComponent from './ChartComponent';
export default {
components: {
ChartComponent
}
}
</script>
回答by Vincent Nguyen
Got it to work. Since I only need it locally inside the home.vuecomponent I imported it inside there under data I added
得到它的工作。因为我只在home.vue组件内部需要它，所以我将它导入到我添加的数据下
components: {
'chart-component': ChartComponent
}
