[英]Where to import component in Vue?
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
中, 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 }
。
我会将您的组件从chart-component
重命名为ChartComponent
,因为破折号不是受支持的字符。 Vue会根据需要将名称正确地转换为破折号,但是当您在代码中搜索组件时,使用一致的名称会有所帮助。
无论如何。 要使用组件,您需要先导入并定义它
home.vue:
<template>
<ChartComponent></ChartComponent>
</template>
<script>
import ChartComponent from './ChartComponent';
export default {
components: {
ChartComponent
}
}
</script>
得到它的工作。 因为我只需要在home.vue
组件内部本地使用它,所以我将其导入到我添加的数据下
components: {
'chart-component': ChartComponent
}
在Vue 3 脚本设置 SFC 中导入组件变得更加容易
<script setup>
import ChartComponent from './components/ChartComponent.vue'
</script>
<template>
<ChartComponent />
</template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.