封装公用组件

效果图：

效果图

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>

这样就完成了一个简单的组件封装了~~