vue中封装组件（Vue实战【封装一个简单的列表组件，实现增删改查】）
导读：🌟前言 大家好，上一期的Vue实战都阅读了吗？上一期主要是对Vuex的一个基本操作，通过Vuex我们可以实现全局的状态（数据）共享，以便与我们更好的实现一些需求。...
🌟前言
大家好 ，上一期的Vue实战都阅读了吗？上一期主要是对Vuex的一个基本操作 ，通过Vuex我们可以实现全局的状态（数据）共享 ，以便与我们更好的实现一些需求 。
不知道大家在日常工作当中是否被频繁的列表增删改查困扰 ，功能很简单但确实是非常繁琐的一项工作；今天这一期呢我会从Vue2父子组件如何传值并结合Element来封装一个简单的列表组件；一次封装 ，多次复用 。🌟table组件封装
在你的component目录下创建一个Table.vue:
<template> <el-card class="box-card" style="width: 100%;height: 100%"> <div class="btnBox"> <el-button v-for="(item,index) in tableOperation" :key="index" :type="item.type" size="small" @[eventName]="handleClick(item.fun, multipleSelection)">{{ item.label }}</el-button> </div> <el-table style="margin-bottom: 20px" :data="tableData" size="small" row-class-name="row" cell-class-name="column" :highlight-current-row="true" fit @selection-change="handleSelectionChange" > <!--这是是为了将表格设置成带有选择框的表格--> <el-table-column type="selection" width="55" /> <el-table-column v-for="(item, index) in tableLabel" :key="index" align="center" :prop="item.prop" :width="item.width" :label="item.label" /> </el-table> <div class="block" style="text-align: end"> <el-pagination background :current-page="1" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </el-card> </template> <script> export default { name: Table, // 因为是子组件 ，要接受父组件传递的数据 ，所以这里我们定义props props: { tableData: { // 父组件传递过来的表格数据 type: Array, default: () => { return [] } }, tableLabel: { // 父组件传递过来的表头数据 type: Array, default: () => { return [] } }, tableOperation: { // 父组件传递过来的操作按钮数据 type: Array, default: () => { return [] } } }, data() { return { eventName: click, // 点击按钮绑定的方法 ，这样写法也可以去绑定一些其他的比如change等方法 multipleSelection: [] // 这个数组用来保存被选择行的数据 ，顺序是按照你勾选的顺序来排序的 } }, methods: { // @selection-change方法可以监听到表格里哪一行被选中 ，类型是数组; // 然后我们将它赋值给定义好的 multipleSelection handleSelectionChange(val) { this.multipleSelection = val }, // 动态绑定操作按钮的点击事件(按钮是父组件传递过来循环出来的,所以我们给按钮定义一个方法) // 接收两个参数 ，一个是fun(string类型) ，一个是row（array类型 ，也就是我们选中行的数据） // 这里的某个按钮时传递的参数 // 比如我点击的是编辑 ，那这时的fun就是 edit,执行的方法就是下边的this.edit（row） handleClick(fun,row) { this[fun](row) }, edit(row) { if (!row.length) { this.$message.error(请勾选数据后操作) return false } else if (row.length > 2) { this.$message.error(当前仅支持单条数据操作) return false } else { console.log(子组件点击编辑 ，触发父组件方法;并传递数据, row) // 通过$meit通知父组件propClick方法 ，并传递两个参数：edit和row this.$emit(propClick, edit, row) } }, look(row) { if (!row.length) { this.$message.error(请勾选数据后操作) return false } else if (row.length > 2) { this.$message.error(当前仅支持单条数据操作) return false } else { console.log(子组件点击查看 ，触发父组件方法;并传递数据, row) // 通过$meit通知父组件propClick方法 ，并传递两个参数：edit和row this.$emit(propClick, look, row) } }, delete(row) { if (!row.length) { this.$message.error(请勾选数据后操作) return false } else if (row.length > 2) { this.$message.error(当前仅支持单条数据操作) return false } else { console.log(子组件点击删除 ，触发父组件方法;并传递数据, row) // 通过$meit通知父组件propClick方法 ，并传递两个参数：edit和row this.$emit(propClick, del, row) } }, handleSizeChange(val) { console.log(`每页 ${val} 条`) }, handleCurrentChange(val) { console.log(`当前页: ${val}`) } } } </script> <style scoped> </style>table组件封装好了 ，就可以在父组件里使用啦 。
🌟父组件（展示表格的页面）
创建一个父组件（也就是你的页面） ，我这里起名index.vue大家可以随意；
<template> <div v-loading="tableLoading" class="dashboard-container"> <!--子组件位置--> <!--自定义table-data,table-label,table-operation三个属性 ，分别传递我们需要的数据--> <!--自定义@propClick方法 ，用来接收子组件的通知并执行定义的btnClick方法--> <myTable :table-data="tableData" :table-label="tableLabel" :table-operation="tableOperation" @propClick="btnClick" /> </div> </template> <script> import { mapGetters } from vuex // 根据你的table组件引入到父组件里 import myTable from @/components/Table/table export default { name: Dashboard, // 并在父组件的compoments里边注册 components: { myTable }, computed: { ...mapGetters([ name ]) }, // eslint-disable-next-line vue/order-in-components data() { return { tableLoading: true, // 子组件的表格数据 tableData: [ { id: 1, date: 2018-07-24, sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 }, { id: 2, date: 2018-07-24, sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 }, { id: 3, date: 2018-07-24, sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 }, { id: 4, date: 2018-07-24, sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 }, { id: 5, date: 2018-07-24, sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 }, { id: 6, date: 2018-07-24, sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 }, { id: 7, date: 2018-07-24, sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 }, { id: 8, date: 2018-07-24, sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 }, { id: 9, date: 2018-07-24, sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 }, { id: 10, date: 2018-07-24, sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 }, { id: 11, date: 2018-07-24, sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 }, { id: 12, date: 2018-07-24, sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 } ], // 子组件的表头数据 tableLabel: [ { label: ID, width: 40, prop: id }, { label: 日期, width: , prop: date }, { label: 销售量, width: , prop: sales }, { label: 销售额, width: , prop: sale }, { label: 成本, width: , prop: const }, { label: 利润, width: , prop: profit } ], // 子组件的操作按钮 tableOperation: [ { label: 编辑, fun: edit, type: primary }, { label: 查看, fun: look, type: success }, { label: 删除, fun: delete, type: danger } ] } }, mounted() { setTimeout(() => { this.tableLoading = false this.$message.success(数据加载成功) }, 1000) }, methods: { // 当父组件接收到了子组件this.$emit的通知后就会执行这个方法来接收子组件点击传递过来的数据 btnClick(fun, row) { if (fun === edit) { console.log(子组件点击了编辑,父组件收到子组件传递的数据, row) } else if (fun === look) { console.log(子组件点击了查看,父组件收到子组件传递的数据, row) } else if (fun === del) { console.log(子组件点击了删除,父组件收到子组件传递的数据, row) } } } } </script> <style lang="scss" scoped> .dashboard { &-container { /*width: 100%;*/ margin: 30px; height: 88vh; } &-text { font-size: 30px; line-height: 46px; } } </style>🌟控制台查看父子组件通信是否成功
列表增删改查
🌟Vue2父子组件传递参数
接下来我们来复习一下父子组件传递参数的方法吧
父组件向子组件传递数据：
父组件通过 props 给子组件下发数据
在父组件内为子组件添加自定义属性 ，例如我上边的table-data,table-label,table-operation三个属性 ，并为其绑定数据；如果是动态绑定就需要加上 ： ，反则不用加 。 子组件内通过定义props来接受数据；并且有以下几个参数配置； 属性 值 说明 type 原生构造器 参数的类型 default any 参数的默认值 ，数组/对象的默认值应当由一个工厂函数返回 required true/false 参数是否必传 validator function 自定义验证函数 Vue.component(example, { props: { // 基础类型检测 (`null` 指允许任何类型) propA: Number, // 可能是多种类型 propB: [String, Number], // 必传且是字符串 propC: { type: String, required: true }, // 数值且有默认值 propD: { type: Number, default: 100 }, // 数组/对象的默认值应当由一个工厂函数返回 propE: { type: Object, default: function () { return { message: hello } } }, // 自定义验证函数 propF: { validator: function (value) { return value > 10 } }, propG: { validator: function (value) { // 这个值必须匹配下列字符串中的一个 return [success, warning, danger].indexOf(value) !== -1 } } } })子组件向父组件传递数据：
子组件通过事件给父组件发送消息
每个 Vue 实例都实现了事件接口 ，即：
使用 $on(eventName) 监听事件 使用 $emit(eventName, optionalPayload) 触发事件1. 主要方法在父组件里 。 2. 在父组件里添加自定义事件 ，自定义事件触发执行主要方法 。 3. 在子组件里写一个通知方法( this.$emit(‘自定义事件’ ，参数) )用来告诉父组件执行自定义事件 。 4. 在需要触发这个事件的元素上添加触发事件（例：@click=“子组件里的通知方法 ”）
<!-- 子组件 --> <template> <el-card class="box-card" style="width: 100%;height: 100%"> <div class="btnBox"> <el-button v-for="(item,index) in tableOperation" :key="index" :type="item.type" size="small" @click="handleClick(item.fun, multipleSelection)">{{ item.label }} </el-button> </div> </el-card> </template> <script> export default { name: Table, methods: { add(row) { console.log(子组件点击新增 ，触发父组件里的自定义事件-propClick) this.$emit(propClick, add) } } } </script> <style scoped> </style> <!-- 父组件 --> <template> <div v-loading="tableLoading" class="dashboard-container"> <myTable @propClick="btnClick" /> </div> </template> <script> import myTable from @/components/Table/table export default { name: Dashboard, components: { myTable }, methods: { //自定义事件-propClick触发该方法, 接收子组件点击按钮数据 btnClick(fun, row) { if (fun === edit) { console.log(子组件点击了编辑,父组件收到子组件传递的数据, row) // 这里就可以去写我们需要调用的接口呀 ，数据处理逻辑呀等等 } else if (fun === look) { console.log(子组件点击了查看,父组件收到子组件传递的数据, row) // 这里就可以去写我们需要调用的接口呀 ，数据处理逻辑呀等等 } else if (fun === del) { console.log(子组件点击了删除,父组件收到子组件传递的数据, row) // 这里就可以去写我们需要调用的接口呀 ，数据处理逻辑呀等等 } } } } </script>🌟写在最后
这篇文章通过父子组件通信并结合Element封装了一个简单的增删改查列表组件 ，你是否学会了呢？很多复杂的功能都是通过基础知识举一反三得来的 ，小伙伴一定记的尝试哦 。后续会为小伙伴们持续更新Vue的一些实战小魔法！各位小伙伴让我们 let’s be prepared at all times！
🌟JSON包里写函数 ，关注博主不迷路
✨原创不易 ，还希望各位大佬支持一下！
👍 点赞 ，你的认可是我创作的动力！
⭐️ 收藏 ，你的青睐是我努力的方向！
✏️ 评论 ，你的意见是我进步的财富！
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！