Vue组件如何封装，这些原则您需要了解一下！

左手的ㄟ右手 2023-02-21 06:08 113阅读 0赞

# 什么样的内容需要封装 #

一段代码在项目中出现两次就开始考虑是否应该进行封装，出现三次就肯定要封装，大到一个页面，一个组件，小到一个function和一个css样式。

# 封装原则 #

> 以下将封装出来的通用组件叫做子组件，引用通用组件的界面叫做父组件。

封装出来的组件必须具有高性能，低耦合的特性，主要从以下几点入手：

## 1.数据从父组件传入 ##

子组件本身不要生成数据，如果需要生成数据，只能在组件内部进行使用，不要传递出去。

父组件使用props对子组件进行传参：

// 父组件向子组件传值
    props: { 
      // 表格显示的数据
      tableData: { 
        type: Array,
        default: function() { 
          return [];
        }
      },
      // 表格的操作
      tableOption: { 
        type: Array,
        default: function() { 
          return [];
        }
      },
      // 控制操作列是否显示
      isOperate: { 
        type: Boolean,
        default: function() { 
          return false;
        }
      }
    }

对于通过props传入的参数，不建议对其进行操作，因为会同时修改父组件里面的数据（如果修改的话，控制台中也会报错的），如果需要修改数据，可以传递给父组件，让父组件去修改（在父组件中处理事件）。

*直通门：*[Vue组件传值，你真的都清楚了吗？][Vue]

## 2.在父组件中处理事件 ##

父组件中处理的事件是和后端交互的事件，比如发起的axios的请求，但并不是所有的事件都放到父组件中处理，比如组件内部的一些交互行为，或者处理的数据只在组件内部传递，就可以在子组件中处理。

// 子组件中
    changeApproval(id) { 
      this.$emit("pushId", id);
    }
    
    // 父组件中
    <common-dialog @pushId="getId"></common-dialog>
    
    getId(id) { 
      this.approvalForm.approval = id;
    }

## 3.记得留一个slot ##

一个通用的组件，往往不能完美的适应所有的应用场景，所以在封装组件的时候，只需要完成组件的80%的功能，剩下的20%让父组件通过slot解决。

<el-table-column label="操作" v-if="isOperate" min-width="150px">
      <template slot-scope="scope">
        <slot name="operate" :row="scope.row"></slot>
      </template>
    </el-table-column>

!-- 父组件 填充表格操作列 -->
    <common-table :tableData="tableData" :tableOption.sync="tableOption" :isOperate="isOperate">
      
      <template slot="operate" slot-scope="scope">
        
        <el-button type="primary" size="mini">查看</el-button>
      </template>
    </common-table>

知识点补充：什么是slot？

> slot是一个插槽，用于分发内容。相当于我在餐厅（子组件）给你占了一个位置，上面写上operate，那你来这里吃饭，如果你是operate，你就可以坐在这个位置上，如果你不是，你就不能坐在这个位置上。

> 简单说就是把父组件中的内容放到对应的插槽的位置上

## 4.不要依赖vuex ##

如果要抽离组件尽量不要使用vuex来实现参数的传递，因为vuex是用来管理组件状态的，虽然可以用来传参，但是不推荐，可以选择放到localstorage中，或者通过props传递等方式。

## 5.合理使用scoped ##

样式中添加scoped可以让样式只对当前组件生效，但是一味使用scoped，会产生重复代码，所以需要有一个全局的样式，组件内只写针对于组件的样式，避免重复的样式代码。

## 6.组件具有单一职责 ##

封装业务组件或者基础组件，如果不能给这个组件起一个有意义的名字，证明这个组件承担的职责可能不够单一，需要继续抽组件，直到它可以是一个独立的组件即可。  
![在这里插入图片描述][20200628211307617.png]

# 封装成果 #

为了适应项目的需求，对ElementUI表格进行了二次封装，具体链接可点击：

*直通门：*[ElementUI对于表格的二次封装][ElementUI]

[Vue]: https://blog.csdn.net/m0_37508531/article/details/105715844
[20200628211307617.png]: https://img-blog.csdnimg.cn/20200628211307617.png
[ElementUI]: https://blog.csdn.net/m0_37508531/article/details/106738147