vue 封装组件供全局使用_Vue如何封装高质量组件

依照MVC模式思想来解释高可复用性、低耦合性的组件定义方法

---

组件分类

级别从小到大：

• 基础组件：只是一种宽泛的定义，可见场景较多，与业务无关的组件。比如列表、表格、输入框等，没有实际的UI，故不能直接使用
• UI组件：与基础组件同级，为基础组件提供UI，仅仅跟样式和数据有关
• 业务组件：与基础组件是一一对应的关系，与业务相关，具有实际的UI，是能够直接使用的组件的最小单位
• 功能组件：也叫做模块组件。由多个业务组件和非组件代码组成的某个业务功能或者模块，仅仅是代码结构的一种划分，实际上没有层级的变化
• 页面组件：路由级的组件，代表某个页面

基础组件相当于MVC中的Model，UI组件相当于View，业务组件 = 基础组件 + UI组件

组件继承

基础组件是可以实现继承的，“继承”是对组件定义的一种扩展。比如轮播图组件可以继承列表组件，因为它具有列表的一些性质。

定义一个组件的文件目录如下：

index.mixin.js是该基础组件的私有定义，在index.vue中通过mixin:[parentComp1, parentComp2..., selfComp]的方式实现继承。

实例

下面通过 豆瓣图书列表 的例子来定义这三个级别的组件：

基础组件定义

豆瓣图书列表这个业务功能抽象出的基础组件就是列表。 列表组件有两个prop：

• 列表数据：类型是Array，数组项为每个列表项的数据对象（列表项数目可以通过一个computed属性来表示）
• UI组件接口：每个基础组件都存在的接口，用于导入UI组件（这个prop在comp.base.mixin中定义）
• meta：用于控制UI组件的元信息（可选）

代码

components/List/index.vue

<script>
    import base from '@lib/interface/comp.base.mixin' // 基础组件接口
    import selfComp from './index.mixin'

    export default {
        name: 'List',
        mixins: [base, selfComp] // 在selfComp前面加上父组件的定义mixin就可以实现继承
    }
</script>

index.mixin.js

// 基础组件定义
export default {
    props: {
        data: {
            // 列表数据
            type: Array,
            default: () => {
                /**
                * 数组项规范：
                * { anymore }
                */
                return []
            }
        }
    },
    computed: {
        // 数据总数
        dataTotal() {
            return this.data.length
        }
    }
}

comp.base.mixin.js

// 基础组件定义Mixin
export default {
    props: {
        ui: {
            // UI组件接口
            type: Object,
            default: () => {
                return null
            }
        },
        meta: {
            // 用于控制UI组件的元信息
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    render: function(h) {
        let uiComponent = this.ui;
        if(uiComponent == null) {
            return h('div', '没有定义UI组件或不能直接调用！')
        }
        else {
            return h(uiComponent, {
                props: {
                    scope: this, // 将基础组件的数据和方法（实例）暴露给UI组件
                    meta: this.meta // 通过meta属性获取控制元信息
                }
            })
        }
    }
}

UI组件定义

为List基础组件提供UI。根据业务使用场景的不同，List可以有多种UI组件，在豆瓣图书列表这个例子中，UI组件就是BookList

代码

components/List/ui/book-list.vue

<style scoped>
...
</style>

<template>
    <div class="book-list">
        <!-- 通过scope访问基础组件的数据和方法 -->
        <div class="book-item" v-for="(item,index) in scope.data" :key="item.id">
            <img class="book-cover" :src="bookCoverUrls[index]" :alt="item.name">
            <div class="book-info">
                <a href="javascript:void(0)">
                    <h3 v-text="item.name"></h3>
                </a>
                <p class="book-rate">
                    <Rate show-text allow-half disabled v-model="item.score">
                        <span style="color: #f5a623" v-text="item.score"></span>
                    </Rate>
                </p>
                <p v-text="item.meta"></p>
            </div>
        </div>
    </div>
</template>

<script>
import ui from '@lib/comp.ui.mixin'

export default {
    name: 'BookList',
    mixins: [ui], // UI组件接口
    data() {
        return {
            bookCoverUrls: [ ... ]
        }
    }
}
</script>

comp.ui.mixin.js

// UI组件定义Mixin
export default {
    props: {
        scope: {
            type: Object,
            default: () => {
                return {}
            }
        },
        meta: {
            type: Object,
            default: () => {
                return {}
            }
        }
    }
}

组件调用

豆瓣图书列表 = List组件 + BookList组件

<template>
    <List :ui="comp.BookList" :data="bookList"/>
</template>

<script>
import List from '@c/List/index.vue'
import BookList from '@c/List/ui/book-list.vue'

export default {
    components: {
        List
    },
    data() {
        return {
            comp: {
                BookList
            },
            bookList: [
                {
                    id: 1,
                    name: '英国特工阿申登',
                    score: 4.6,
                    meta: '[英] 毛姆 著/理想国丨广西师范大学出版社/2019-1'
                },
                {
                    id: 2,
                    name: '建筑师',
                    score: 4.8,
                    meta: '(美) 大卫·马祖凯利/后浪 | 北京联合出版公司/2019-3'
                },
                {
                    id: 3,
                    name: '长长的回家路',
                    score: 4.5,
                    meta: '[瑞典] 弗雷德里克·巴克曼/北京联合出版社/2019-1'
                },
                {
                    id: 4,
                    name: '缓刑时刻',
                    score: 4.9,
                    meta: '[意]普里莫·莱维/中信出版集团/2019-1'
                }
            ]
        }
    }
}
</script>

效果