vue组件拆分

前言

在 vue 中，组件拆分这个名词大家或多或少都听过或者了解过吧，所谓组件拆分简单来说就是把页面拆分成一个又一个的 .vue 单文件，那可能有同学要问了，我把代码都写在一个文件上也可以，为什么非要拆分组件呢？

1. vue为什么要拆分组件？

其实在很多时候我们拆分组件并不是为了复用它，而是为了书写代码以及后期维护的人员能够更加容易阅读和管理开发。那抛开这些不谈，假如我们在一个 .vue 单文件中写了几千行代码，很可能就会出现耦合严重的情况；如果我们将组件拆分，那么组件与组件之间就变成了相对独立的模块，各司其职，最终达到高内聚低耦合的效果。

2. vue怎么拆分组件？

2.1 拆分

首先我们需要观察页面中有哪些组件是需要单独拆分出来独立维护的。一般来说具有以下特性即需要进行组件拆分：

• 具有复用性质的功能组件（上拉加载下拉刷新、tab切换、轮播等等）
• 公共组件（公共头部组件、侧边栏组件、公共尾部组件等等）
• 具有独立逻辑的组件（对话弹框、tab页等等）
• 单文件中代码量庞大

2.2 引入

在父组件中引入子组件。

import Dialog from "./dialog/dialog";

2.3 注册

在父组件中注册组件。
注意： components 与 data(){return{}} 是同级的。

components: {
  Dialog,
},

2.4 使用

在父组件中使用。

<div>
  <Dialog />
</div>

看到这里，相信你对组件拆分已经有了初步的认识，下面我们用一个更加完整的实例带你深入剖析组件拆分。

我们就以对话弹框为例写一个完整的组件拆分。案例中会用到组件传值，如果对此有疑惑，可参考博主另一篇文章 vue组件传值 。

文件结构

/views/popUp 根目录
/views/popUp/index.vue 父组件
/views/popUp/dialog/dialog.vue 子组件

要拆分的组件代码（父组件）

在这段代码中，:dialogChild 、:dialogRow 相当于是在父组件中给子组件标签上绑定了两个属性， 属性上挂载需要传递给子组件的值。.sync 是 vue 中的修饰符，用于实现父子组件数据双向绑定的语法糖。

<template>
  <div class="outerBox">
    <div>
      <el-table :data="tableData" stripe border>
        <el-table-column prop="phone" label="联系方式" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="age" label="年龄" align="center"></el-table-column>
        <el-table-column prop="stature" label="身高" align="center"></el-table-column>
        <el-table-column prop="address" label="住址" align="center"></el-table-column>
        <el-table-column prop="c" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="success" icon="el-icon-edit" @click="compileClick(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 自定义弹框 -->
    <div>
      <Dialog :dialogChild.sync="editDialog.dialogLsattr" :dialogRow="editDialog.dialogRow" />
    </div>
  </div>
</template>

<script>
import Dialog from "./dialog/dialog"; //引入弹框组件
export default {
  //一定要注册组件
  components: {
    Dialog,
  },
  data() {
    return {
      // 模拟数据
      tableData: [
        {
          phone: "17730818218",
          name: "小明",
          age: "20",
          stature: "173",
          address: "昌平",
        },
        {
          phone: "15587477741",
          name: "小红",
          age: "18",
          stature: "162",
          address: "海淀",
        },
        {
          phone: "15513252258",
          name: "小兰",
          age: "19",
          stature: "165",
          address: "丰台",
        },
        {
          phone: "15512554475",
          name: "小黄",
          age: "21",
          stature: "175",
          address: "朝阳",
        },
      ],
      // 父组件要传递的数据
      editDialog: {
        dialogRow: {}, //数据集合
        dialogLsattr: false, //打开/关闭弹框
      },
    };
  },
  mounted() {},
  methods: {
    // 编辑的点击事件
    compileClick(row) {
      this.editDialog.dialogRow = { ...row };
      this.editDialog.dialogLsattr = true;
    },
  },
};
</script>

<style scoped>
.outerBox {
  padding: 16px 20px;
}
</style>

被拆分的弹框组件代码（子组件）

在这段代码中，子组件通过 props:['父组件标签中定义的属性名'] 来接收数据，当然，在 props 中，你可以通过 type 指定数据的类型，也可以通过 default 指定数据的关键字， default 简单来说就是没有值的时候默认的值。

其中，$emit('update:dialogChild', false) 会触发更新事件（update: props属性值），改变 dialogChild 的值。

<template>
  <el-dialog :close-on-click-modal="false" title="标题" width="30%" :visible.sync="dialogVisible" @close="$emit('update:dialogChild', false)"></el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false, //打开/关闭弹框
      detailedData: {}, //接收数据集合
    };
  },
  //通过props接收父组件传递的数据
  props: {
    //弹框打开关闭的值
    dialogChild: {
      type: Boolean, //验证类型，也可以验证其他类型
      default: false, //如果父组件传值，则用父组件的值渲染，反之使用默认值
    },
    //表格点击当前行的数据
    dialogRow: {
      type: Object,
      default: false,
    },
  },
  //通过watch监听父组件传递的数据并赋值，然后动态改变弹框的打开/关闭，动态改变数据的变化
  watch: {
    dialogChild: {
      handler(newName, oldName) {
        console.log("弹框的状态:", newName);
        this.dialogVisible = newName;
      },
      deep: true, //深度监听
    },
    dialogRow: {
      handler(newName, oldName) {
        console.log("当前的数据:", { ...newName });
        this.detailedData = newName;
      },
      deep: true,
    },
  },
};
</script>

最终实现效果

子组件中打印的值