vue 组件开发

今天来和大家分享一下组件开发，很多用vue框架开发的小伙伴对于组件开发应该不陌生，顶多就是对其概念模糊啦些：

起手一条面试题，阁下该如何应对：

如何封装Vue组件？封装一个好用的Vue组件需要遵循哪些设计原则？

你的答案是什么呢？评论区说说...

总的来说，封装一个好的组件，主要是保证一下四点：

1、单一职责原则（帮助组件专注于一个责任）

2、可复用性原则（使组件成为通用的解决方案）

3、可配置性原则（增加组件的灵活性）

4、单向数据流原则（提供了清晰的数据传递方向）

如果不考虑好与坏，那全部踢掉，遵循三行原则：（好用就行、好看就行、好写就行）

文章都写啦，那就讲点有专业性的东西嘛

回答一下上面的问题哈：

封装插件的流程大致为：明确需求、定义 Props 和 Events、使用插槽slot、保持组件独立性、样式隔离、可复用性可扩展性；设计原则遵循单一职责原则、可复用性原则、可配置性原则、单向数据流原则进行对组件进行设计封装。

组件定义简单来说就是以下三点进行简单的构成：

1、props

2、emit

3、slot

props接收传入数据、emit完成组件事件触发和数据传递、slot使得组件灵活性变强，增加可复用性

以下进行一个简单的举例：

<template>
    <div class="tab_bar">
        <div class="left">
            返回键
        </div>
        <div class="center">
            <slot name="center">
                {{ title }}
            </slot>
        </div>
        <div class="right" @click="$emit('more')">
            更多
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: '标题'
        }
    },
}
</script>

<style lang="scss" scoped>
.tab_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    div {
        flex: none;
    }

    .center {
        flex: 1;
    }
}
</style>

这样一个简单的移动端顶部导航组件封装好啦，如果想更清晰了解插槽和v-model组件封装的话，推荐以下文章：

slot插槽：vue 插槽的三种形态（匿名插槽、具名插槽、作用域插槽）-CSDN博客