[英]Where to import component in Vue?
New to Vue, working off a scaffolded project from the command line. Vue 新手,从命令行处理脚手架项目。 Currently I have:目前我有:
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>
And home.vue
还有home.vue
<template>
<chart-component></chart-component>
</template>
// rest of home
I am trying to create and import chart-component.vue
to use inside home.vue
but not sure where to import it at.我正在尝试创建并导入chart-component.vue
以在home.vue
使用,但不确定将其导入到何处。 I've tried adding it in main.js
and App.vue
unsuccessfully.我尝试将它添加到main.js
和App.vue
中, App.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.vue
and adding a components { ChartComponent }
underneath the name
.我最好的猜测是将它导入App.vue
并在name
下添加一个components { ChartComponent }
。 Second attempt was importing it into main.js
and putting ChartComponent
inside components: { App, ChartComponent }
.第二次尝试是将其导入main.js
并将ChartComponent
放入components: { App, ChartComponent }
。
I would rename your component to ChartComponent
from chart-component
, as the dash is not a supported character. 我会将您的组件从chart-component
重命名为ChartComponent
,因为破折号不是受支持的字符。 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. Vue会根据需要将名称正确地转换为破折号,但是当您在代码中搜索组件时,使用一致的名称会有所帮助。
anyway. 无论如何。 for using a component, you need to import it and define it first 要使用组件,您需要先导入并定义它
home.vue: home.vue:
<template>
<ChartComponent></ChartComponent>
</template>
<script>
import ChartComponent from './ChartComponent';
export default {
components: {
ChartComponent
}
}
</script>
Got it to work. 得到它的工作。 Since I only need it locally inside the home.vue
component I imported it inside there under data I added 因为我只需要在home.vue
组件内部本地使用它,所以我将其导入到我添加的数据下
components: {
'chart-component': ChartComponent
}
Importing component becomes much easier inVue 3 script setup SFCs在Vue 3 脚本设置 SFC 中导入组件变得更加容易
<script setup>
import ChartComponent from './components/ChartComponent.vue'
</script>
<template>
<ChartComponent />
</template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.