在一个vue文件里使用另外的vue文件
这篇文章演示的是如何用Vue.js官方命令行快速搭建的项目中如何在App.vue中使用其他的vue文件(组件)。快速搭建的vue项目中目录结构有src下的components和App.vue。如下图:components是用来存放组件文件。App.vue是项目入口文件。我们在components中创建两个组件文件。若想使用这两个文件,首先需要在router > ind...
·
这篇文章演示的是如何用Vue.js官方命令行快速搭建的项目中如何在App.vue中使用其他的vue文件(组件)。
快速搭建的vue项目中目录结构有src下的components和App.vue。
如下图:
components是用来存放组件文件。
App.vue是项目入口文件。
我们在components中创建两个组件文件。
若想使用这两个文件,首先需要在router > index.js中注册他们。
index.js:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/',
name: 'Hello',
component: Hello
}
]
})
注册之后打开App.vue,找到javascript代码部分。
引入这两个文件,并且声明这两个文件。
名字需要与import的名字相同
<script>
import HelloWorld from "./components/HelloWorld"
import Hello from "./components/Hello"
export default {
name: 'App',
components: {
Hello,
HelloWorld,
}
}
</script>
在模板部分使用组件。
最后附上整个App.vue的代码
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
<Hello/>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld"
import Hello from "./components/Hello"
export default {
name: 'App',
components: {
Hello,
HelloWorld,
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)