封装公用组件
2020-02-09 本文已影响0人
web30
效果图:

1. src下components目录下新建back.vue文件

2. 然后在back文件里写组件的逻辑
<template>
<div>
<i class="el-icon-arrow-left" @click="goBack"></i>
<span>{{title}}</span>
<div>
<template slot="title">
地址管理
</template>
</div>
</div>
</template>
<script>
export default {
name: "back",
data(){
return{}
},
// 子组件接收
props:{
title: String, // 定义数据的类型
pathName: String
},
methods:{
goBack(){
if(this.pathName){
this.$router.push({name: this.pathName});
}else {
this.$router.go(-1);
}
}
}
}
</script>
<style scoped>
/*相关样式或者单独写好再引入进来*/
@import "./style.less";
</style>
3. 在views目录里新建textBack子组件
<template>
<div>
<!-- 封装组件名是back,所以这里直接写-->
<!--注意:引入进来的组件名都必须是保持一致-->
<back title="选择套餐"></back>
</div>
</template>
<script>
// 把封装组件引入进来
import back from '@/components/back'
export default {
name: "textBack",
data(){
return{}
},
// 把封装组件引入进来
components: {
back
},
}
</script>
<style scoped>
</style>
这样就完成了一个简单的组件封装了~~