VUE组件的配置/使用方法,和VUE配置路由可以一起看,分清两者的区别。
VUE的一大特色就是组件复用,写代码的时候封装好组件是一个很好的习惯,一来省时省力,二来后期维护也很方便。
适用场景:比如一个头部置顶的导航栏,预计在一个项目的很多页面都要使用,就可以将它封装为组件(components中),多次调用。
步骤以导航栏为例:
1.在components中创建导航栏文件the-header.vue
2.在the-header.vue里面输入导航内容。(这里只是举个例子方便看,拿element组件快速创建)
<template>
<div> //注意,一个template模板里只允许有一个大div,所以我习惯会先写一个div全包裹起手
<el-header class="navbar navbar-default navbar-fixed-top">
<div class="toright1">
<el-menu class="theselect" :default-active="activeIndex" mode="horizontal" @select="handleSelect">
<el-menu-item index="1"><router-link to="/">首页</router-link></el-menu-item>
<el-menu-item index="2"><router-link to="/" tag="span">例子1</router-link></el-menu-item>
<el-menu-item index="3"><router-link to="/" tag="span">例子2</router-link></el-menu-item>
<el-menu-item index="4"><router-link to="/" tag="span">例子3</router-link></el-menu-item>
<el-menu-item index="4"><router-link to="/" tag="span">例子4</router-link></el-menu-item>
</el-menu>
</div>
</el-header>
</div>
</template>
3.在the-header.vue中导出组件
<script>
export default ({ //导出
name:'TheHeader', //注意,这里最好用这种驼峰命名法,不要用一个单词之类的,组件名设置不当会无法正常显示,而且不报错
data() {
return {
activeIndex: '1', //设置导航栏默认指index=1那条,不用管
};
},
})
</script>
4.在需要使用组件的界面,导入组件(这里以home首页为例)
首页其他都正常编写,然后在script中导入(3步,缺一不可)
<script>
import TheHeader from '../components/the-header.vue' //1.从路径导入
export default {
name: 'Home',
components: { //2.组件绑定,注意是components,这个s不要漏
TheHeader, //3.把导入的TheHeader 绑定进来,正式成为组件,这个就是组件名
}
}
</script>
5.组件导入成功,在home首页使用,放到你想放的位置
<TheHeader />
<TheHeader ></TheHeader >
//这两种写法一样的,over