vue的组件化的理解之单独拆分的组件&组件的封装(以el-table组件的二次封装举例)

简介: vue的组件化的理解之单独拆分的组件&组件的封装(以el-table组件的二次封装举例)

highlight: a11y-dark

什么是组件化

组件化是一种思想,就是拆分的意思,通俗而言,就是大而化小(没有小而化了)、方便管理。比如咱们中国地大物博,人口众多不好管理,所以就拆分成许多省、直辖市、自治区,方便管理。写代码也是一样,如果一个文件写了几万行代码,就会耦合太严重,拆分开来,方便管理。

但是组件化不能过渡使用,不能为了组件化而组件化。合理使用,才为上策

组件化和模块化的区别

组件化-ui视图层面的拆分

组件化-ui视图层面的拆分,以vue为例,一个页面有头部、内容区、底部。可以拆分开来,这里的拆分一般都会带着样式css,所以称之为UI视图层面的拆分(当然也会包含js的相关逻辑)

模块化-js层面的拆分

模块化的拆分主要是js逻辑层面的拆分,二者类似,但不同

组件的分类

独立拆分的组件

比如我们把一个页面的头部、内容区、底部分别拆分成三个独立的组件

公共复用的组件

比如在很多的路由页面里,都需要使用到一个弹框、或者使用到一个表格。我们可以封装一个弹框或者封装一个表格,哪里需要引哪里,不同页面的弹框或表格数据不一样,我们可以通过给封装的公共组件传递不同的数据,使其展现不同。

其实一个.vue文件就是一个组件,只不过是页面级别的组件罢了

独立拆分的组件之拆分步骤

第一步 组件拆分

本来都写在一个文件中的内容,比如一个.vue文件的结构中包括头部、底部、内容区。我们把头部的html、css、js的内容,单独拎出来成为一个新的.vue文件。当然底部、和内容区的也同样单独拎出来。单独拎出来的就放在components文件夹下吧

第二步 组件引入

import dialogMask from "./components/dialog";

第三步 组件注册

// 是components不是component,要加个s,因为组件可能要注册多个
export default {
    // ...
    components: {
        dialogMask,
    },
}

第四步 组件使用

<div class="dialog">
      <dialog-mask></dialog-mask>
</div>

公共复用的组件之拆分步骤

复用组件的拆分步骤,最后el-table组件的二次封装会讲解,诸位看官且继续往下看。这里先按下不表。
说道组件的封装,就要与数据传递打交道,所以这里简单说一下vue组件间的数据传递,又因为封装组件大多数的数据传递是以父子组件的传递为主,所以这里提一下vue父子组件间的数据传递。

父子组件间的数据传递之两种方式

方式一(v-bind加v-on)

父传子

  • 父组件v-bind绑定自己data中数据传递给子组件
  • 子组件通过props接收到在页面中使用

步骤图如下:

image.png

子传父

  • 子组件通过this.$emit('eventName','参数')触发父组件中的方法
  • 父组件要提前在组件上通过v-on暴露给子组件以便调用

步骤图如下:

image.png

方式二(使用ref取值赋值)

父传子或子传父

  • 第一步,给子组件打一个ref,就可以看到子组件所有的东西,感兴趣的朋友可以打印一下this.$refs.dialogRef结果一目了然。 <dialogMask ref="dialogRef"></dialogMask>
  • 第二步,在父组件中把父组件的数据赋给子组件(父传子)this.$refs.dialogRef.子组件的数据 = this.父组件的数据
  • 第三步,在子组件中直接取到拿到子组件的数据赋给父组件 this.父组件的数据 = this.$refs.dialogRef.子组件的数据

父子组件的方法的相互调用

就记住常用的方式吧

  • 父组件调用子组件的方法,使用ref
    this.$refs.xxx.childMethods()
  • 子组件调用父组件的方法,使用this.$emit('eventName','参数')

饿了么UI中的el-table组件的二次封装

饿了么UI的组件是饿了么团队基于vue封装的,里面有很多常用的组件,方便我们快速开发项目。不过假设我们的项目中的很多页面都有表格呈现,表格的结构差不多,就是数据不一样,如果我么每个页面都去写el-table一大堆的话,就会比较麻烦,倒不如自己封装一个公共的table组件,那个页面用table的话,那个页面就引进来,传参即可。

第一步,新建组件,注册并在main.js引入

流程图如下:

image.png
至此,我们自定义的封装的myTable组件已经注册好了,那个页面需要用,就在那个页面去引入,传对应的参数即可

第二步,根据需求考虑传参

我们先看一下效果图:

image.png

需求如下:

  • 复选框列和序号列可控制是否展示
  • 表头数据动态展示
  • 表内容数据也动态展示
实际项目中我们要发请求获取表的数据和表内容数据,这里的话,我们就模拟一下数据即可

封装的myTable组件代码

<template>
  <div class="box">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <!-- 复选框列
              复选框列和索引列因为有的显示有的不显示,所以我们使用一个v-if去控制它,
              v-if的标识取决于父组件(引用这个组件的组件)传递过来的标识。子组件也就是
              我们封装的这个myTable组件用props接收一下又因为复选框要有勾选时间所以
              @select-change事件不能落下
       -->
      <el-table-column
        v-if="isShowCheckbox == true"
        type="selection"
        width="48"
        fixed
      ></el-table-column>
      <!-- 索引列 -->
      <el-table-column
        v-if="isShowIndex == true"
        label="序号"
        type="index"
        width="50"
        fixed
      >
      </el-table-column>
      <!-- 主内容列 
              主内容列的表头就是label,表头列对应的数据就是prop,所以父组件可以传递过来
              一个数组,里面的每一项就是label的名字和prop对应的值。通过v-for就动态了
      -->
      <el-table-column
        :prop="item.propName"
        :label="item.labelName"
        v-for="(item, index) in tableHeaderTitle"
        :key="index"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "myTable",
  props: {
    // 父组件传递过来的表头的数组数据
    tableHeaderTitle: {
      type: Array,
      default: [],
    },
    // 父组件传递过来的表内容的数组数据
    //  注意:表头内容数据和表内容数据有关联的
    tableData: {
      type: Array,
      default: [],
    },
    // 父组件传递过来的是否展示复选框列的标识
    isShowCheckbox: {
      type: Boolean,
      default: false,
    },
    // 父组件传递过来的是否展示序号索引列的标识
    isShowIndex: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    // 勾选以后,要把勾选的这一行的数据传递给父组件,以供使用
    handleSelectionChange(checked) {
      this.$emit("receiveCheckedData", checked);
    },
  },
};
</script>

引用myTable组件的父组件代码

<template>
  <div id="app">
    <!-- 因为之前已经vue全局注册了自己封装的组件,所以这里不需要在引入这个组件了
         可以直接用即可 -->
    <my-table
      :tableHeaderTitle="tableHeaderTitle"
      :tableData="tableData"
      :isShowCheckbox="isShowCheckbox"
      :isShowIndex="isShowIndex"
      @receiveCheckedData="receiveCheckedData"
    ></my-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 模拟表头数据,实际要发请求获取的
      tableHeaderTitle: [
        {
          propName: "name",
          labelName: "姓名",
        },
        {
          propName: "age",
          labelName: "年龄",
        },
        {
          propName: "gender",
          labelName: "性别",
        },
        {
          propName: "height",
          labelName: "身高",
        },
        {
          propName: "weight",
          labelName: "体重",
        },
        {
          propName: "like",
          labelName: "爱好",
        },
        {
          propName: "address",
          labelName: "住址",
        },
      ],
      // 模拟表内容数据
      tableData: [
        {
          id:"11111",
          name: "孙悟空",
          age: 500,
          gender: "男",
          height: "七尺男儿",
          weight: "三百吨",
          like: "桃子",
          address: "花果山水帘洞",
        },
        {
          id:"22222",
          name: "猪八戒",
          age: 88,
          gender: "男",
          height: "七尺男儿",
          weight: "八百吨",
          like: "肉包子",
          address: "高老庄",
        },
        {
          id:"33333",
          name: "沙和尚",
          age: 1000,
          gender: "男",
          height: "七尺男儿",
          weight: "三百吨",
          like: "鱼",
          address: "通天河",
        },
      ],
      // 是否展示复选框列
      isShowCheckbox:true,
      // 是否展示序号索引列
      isShowIndex:true,
    };
  },
  methods: {
    // 接收子组件勾选的行的数据
    receiveCheckedData(checked){
      console.log('checked',checked);
    }
  },
};
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 50px;
}
</style>

在实际情况中,需要根据产品的需求,去做出对应的封装。组件封装一定要灵活

补充(看饿了么组件的收获)

我们打开node_modules文件夹下,里面有很多的依赖包(库),我们找到element-ui的这个文件夹,里面的packages文件夹存放的就是饿了么团队封装好的组件。如下图:

image.png

没事看看也挺好,也能学到不少的东西

image.png
小伙伴们如果觉得文章写的还勉强凑合能看,给鼓励一下点个赞呗。感谢哦

相关文章
|
5天前
|
资源调度 JavaScript API
vue3封装城市联动组件
vue3封装城市联动组件
|
2天前
|
JavaScript
vue中使用@scroll不生效的问题
vue中使用@scroll不生效的问题
|
1天前
|
数据采集 JavaScript 搜索推荐
我们一起聊聊如何对Vue项目进行搜索引擎优化
【9月更文挑战第4天】Vue 项目的搜索引擎优化(SEO)较为复杂,因其内容默认由 JavaScript 渲染,部分搜索引擎难以索引。为提升 SEO 效果,可采用服务器端渲染(SSR)或预渲染,使用 Nuxt.js 或 Vue Server Renderer 实现 SSR,或利用 Prerender SPA Plugin 预渲染静态 HTML。此外,动态管理 Meta 标签、优化静态内容与 Sitemap、懒加载、图片优化、提升页面速度、设置正确的路由模式、使用结构化数据及构建良好外链均有益于 SEO。
33 11
|
5天前
|
存储 JavaScript
vue组件的五种传值方法(父子\兄弟\跨组件)
vue组件的五种传值方法(父子\兄弟\跨组件)
|
2天前
|
缓存 JavaScript 前端开发
vue中使用keep-alive的问题
vue中使用keep-alive的问题
|
4天前
|
JavaScript 前端开发
VUE技术栈-Vue的基本使用
尹正杰在其博客中介绍了Vue.js框架,它是一个渐进式JavaScript框架,由尤雨溪开发,结合了AngularJS的模板语法和数据绑定以及React的组件化和虚拟DOM技术,适合构建高效、轻量化的用户界面。
16 4
|
5天前
|
缓存 JavaScript 容器
vue动态组件化原理
【9月更文挑战第2天】vue动态组件化原理
16 2
|
7天前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
13 0
|
8天前
|
JavaScript 前端开发 测试技术
Vue.js开发者必看!Vue Test Utils携手端到端测试,打造无懈可击的应用体验,引领前端测试新风尚!
【8月更文挑战第30天】随着Vue.js的普及,构建可靠的Vue应用至关重要。测试不仅能确保应用质量,还能提升开发效率。Vue Test Utils作为官方测试库,方便进行单元测试,而结合端到端(E2E)测试,则能构建全面的测试体系,保障应用稳定性。本文将带你深入了解如何使用Vue Test Utils进行单元测试,通过具体示例展示如何测试组件行为;并通过Cypress进行E2E测试,确保整个应用流程的正确性。无论是单元测试还是E2E测试,都能显著提高Vue应用的质量,让你更加自信地交付高质量的应用。
18 0
|
9天前
|
JavaScript 开发者
[译] 监听第三方 Vue 组件的生命周期钩子
[译] 监听第三方 Vue 组件的生命周期钩子