🌟前言

大家好，上一期的Vue實戰(zhàn)都閱讀了嗎？上一期主要是對Vuex的一個基本操作，通過Vuex我們可以實現(xiàn)全局的狀態(tài)（數(shù)據(jù)）共享，以便與我們更好的實現(xiàn)一些需求。
不知道大家在日常工作當中是否被頻繁的列表增刪改查困擾，功能很簡單但確實是非常繁瑣的一項工作；今天這一期呢我會從Vue2父子組件如何傳值并結(jié)合Element來封裝一個簡單的列表組件；一次封裝，多次復(fù)用。

🌟table組件封裝

在你的component目錄下創(chuàng)建一個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-tablestyle="margin-bottom: 20px":data="tableData"size="small"row-class-name="row"cell-class-name="column":highlight-current-row="true"fit@selection-change="handleSelectionChange"><!--這是是為了將表格設(shè)置成帶有選擇框的表格--><el-table-columntype="selection"width="55"/><el-table-columnv-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-paginationbackground: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',// 因為是子組件，要接受父組件傳遞的數(shù)據(jù)，所以這里我們定義propsprops: {tableData: { // 父組件傳遞過來的表格數(shù)據(jù)type: Array,default: () => {return []}},tableLabel: { // 父組件傳遞過來的表頭數(shù)據(jù)type: Array,default: () => {return []}},tableOperation: { // 父組件傳遞過來的操作按鈕數(shù)據(jù)type: Array,default: () => {return []}}},data() {return {eventName: 'click',  // 點擊按鈕綁定的方法，這樣寫法也可以去綁定一些其他的比如change等方法multipleSelection: [] // 這個數(shù)組用來保存被選擇行的數(shù)據(jù)，順序是按照你勾選的順序來排序的}},methods: {// @selection-change方法可以監(jiān)聽到表格里哪一行被選中，類型是數(shù)組;// 然后我們將它賦值給定義好的 multipleSelection handleSelectionChange(val) {this.multipleSelection = val},// 動態(tài)綁定操作按鈕的點擊事件(按鈕是父組件傳遞過來循環(huán)出來的,所以我們給按鈕定義一個方法)// 接收兩個參數(shù)，一個是fun(string類型)，一個是row（array類型，也就是我們選中行的數(shù)據(jù)）// 這里的某個按鈕時傳遞的參數(shù)// 比如我點擊的是編輯，那這時的fun就是 'edit',執(zhí)行的方法就是下邊的this.edit（row）handleClick(fun,row) {this[fun](row)},edit(row) {if (!row.length) {this.$message.error('請勾選數(shù)據(jù)后操作')return false} else if (row.length > 2) {this.$message.error('當前僅支持單條數(shù)據(jù)操作')return false} else {console.log('子組件點擊編輯，觸發(fā)父組件方法;并傳遞數(shù)據(jù)', row)// 通過$meit通知父組件propClick方法，并傳遞兩個參數(shù)：'edit'和rowthis.$emit('propClick', 'edit', row)}},look(row) {if (!row.length) {this.$message.error('請勾選數(shù)據(jù)后操作')return false} else if (row.length > 2) {this.$message.error('當前僅支持單條數(shù)據(jù)操作')return false} else {console.log('子組件點擊查看，觸發(fā)父組件方法;并傳遞數(shù)據(jù)', row)// 通過$meit通知父組件propClick方法，并傳遞兩個參數(shù)：'edit'和rowthis.$emit('propClick', 'look', row)}},delete(row) {if (!row.length) {this.$message.error('請勾選數(shù)據(jù)后操作')return false} else if (row.length > 2) {this.$message.error('當前僅支持單條數(shù)據(jù)操作')return false} else {console.log('子組件點擊刪除，觸發(fā)父組件方法;并傳遞數(shù)據(jù)', row)// 通過$meit通知父組件propClick方法，并傳遞兩個參數(shù)：'edit'和rowthis.$emit('propClick', 'del', row)}},handleSizeChange(val) {console.log(`每頁 ${val} 條`)},handleCurrentChange(val) {console.log(`當前頁: ${val}`)}}
}
</script><style scoped></style>

table組件封裝好了，就可以在父組件里使用啦。

🌟父組件（展示表格的頁面）

創(chuàng)建一個父組件（也就是你的頁面），我這里起名index.vue大家可以隨意；

<template><div v-loading="tableLoading" class="dashboard-container"><!--子組件位置--><!--自定義table-data,table-label,table-operation三個屬性，分別傳遞我們需要的數(shù)據(jù)--><!--自定義@propClick方法，用來接收子組件的通知并執(zhí)行定義的btnClick方法--><myTable:table-data="tableData" :table-label="tableLabel":table-operation="tableOperation"@propClick="btnClick" /></div>
</template><script>
import { mapGetters } from 'vuex'
// 根據(jù)你的table組件引入到父組件里
import myTable from '@/components/Table/table'
export default {name: 'Dashboard',// 并在父組件的compoments里邊注冊components: {myTable},computed: {...mapGetters(['name'])},// eslint-disable-next-line vue/order-in-componentsdata() {return {tableLoading: true,// 子組件的表格數(shù)據(jù)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 }],// 子組件的表頭數(shù)據(jù)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 = falsethis.$message.success('數(shù)據(jù)加載成功')}, 1000)},methods: {// 當父組件接收到了子組件this.$emit的通知后就會執(zhí)行這個方法來接收子組件點擊傳遞過來的數(shù)據(jù)btnClick(fun, row) {if (fun === 'edit') {console.log('子組件點擊了編輯,父組件收到子組件傳遞的數(shù)據(jù)', row)} else if (fun === 'look') {console.log('子組件點擊了查看,父組件收到子組件傳遞的數(shù)據(jù)', row)} else if (fun === 'del') {console.log('子組件點擊了刪除,父組件收到子組件傳遞的數(shù)據(jù)', row)}}}
}
</script><style lang="scss" scoped>
.dashboard {&-container {/*width: 100%;*/margin: 30px;height: 88vh;}&-text {font-size: 30px;line-height: 46px;}
}
</style>

🌟控制臺查看父子組件通信是否成功

🌟Vue2父子組件傳遞參數(shù)

接下來我們來復(fù)習一下父子組件傳遞參數(shù)的方法吧

父組件向子組件傳遞數(shù)據(jù)：

父組件通過 props 給子組件下發(fā)數(shù)據(jù)

• 在父組件內(nèi)為子組件添加自定義屬性，例如我上邊的table-data,table-label,table-operation三個屬性，并為其綁定數(shù)據(jù)；如果是動態(tài)綁定就需要加上 ：，反則不用加。
• 子組件內(nèi)通過定義props來接受數(shù)據(jù)；并且有以下幾個參數(shù)配置；

屬性	值	說明
type	原生構(gòu)造器	參數(shù)的類型
default	any	參數(shù)的默認值，數(shù)組/對象的默認值應(yīng)當由一個工廠函數(shù)返回
required	true/false	參數(shù)是否必傳
validator	function	自定義驗證函數(shù)

Vue.component('example', {props: {// 基礎(chǔ)類型檢測 (`null` 指允許任何類型)propA: Number,// 可能是多種類型propB: [String, Number],// 必傳且是字符串propC: {type: String,required: true},// 數(shù)值且有默認值propD: {type: Number,default: 100},// 數(shù)組/對象的默認值應(yīng)當由一個工廠函數(shù)返回propE: {type: Object,default: function () {return { message: 'hello' }}},// 自定義驗證函數(shù)propF: {validator: function (value) {return value > 10}},propG: {validator: function (value) {// 這個值必須匹配下列字符串中的一個return ['success', 'warning', 'danger'].indexOf(value) !== -1}}}
})

子組件向父組件傳遞數(shù)據(jù)：

子組件通過事件給父組件發(fā)送消息

每個 Vue 實例都實現(xiàn)了事件接口，即：

• 使用 $on(eventName) 監(jiān)聽事件
• 使用 $emit(eventName, optionalPayload) 觸發(fā)事件

1. 主要方法在父組件里。
2. 在父組件里添加自定義事件，自定義事件觸發(fā)執(zhí)行主要方法。
3. 在子組件里寫一個通知方法( this.$emit(‘自定義事件’，參數(shù)) )用來告訴父組件執(zhí)行自定義事件。
4. 在需要觸發(fā)這個事件的元素上添加觸發(fā)事件（例：@click=“子組件里的通知方法”）

<!-- 子組件 -->
<template><el-card class="box-card" style="width: 100%;height: 100%"><div class="btnBox"><el-buttonv-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('子組件點擊新增，觸發(fā)父組件里的自定義事件-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觸發(fā)該方法, 接收子組件點擊按鈕數(shù)據(jù)btnClick(fun, row) {if (fun === 'edit') {console.log('子組件點擊了編輯,父組件收到子組件傳遞的數(shù)據(jù)', row)// 這里就可以去寫我們需要調(diào)用的接口呀，數(shù)據(jù)處理邏輯呀等等} else if (fun === 'look') {console.log('子組件點擊了查看,父組件收到子組件傳遞的數(shù)據(jù)', row)// 這里就可以去寫我們需要調(diào)用的接口呀，數(shù)據(jù)處理邏輯呀等等} else if (fun === 'del') {console.log('子組件點擊了刪除,父組件收到子組件傳遞的數(shù)據(jù)', row)// 這里就可以去寫我們需要調(diào)用的接口呀，數(shù)據(jù)處理邏輯呀等等}}}
}
</script>

🌟寫在最后

這篇文章通過父子組件通信并結(jié)合Element封裝了一個簡單的增刪改查列表組件，你是否學會了呢？很多復(fù)雜的功能都是通過基礎(chǔ)知識舉一反三得來的，小伙伴一定記的嘗試哦。后續(xù)會為小伙伴們持續(xù)更新Vue的一些實戰(zhàn)小魔法！各位小伙伴讓我們 let’s be prepared at all times！

🌟JSON包里寫函數(shù)，關(guān)注博主不迷路

?原創(chuàng)不易，還希望各位大佬支持一下！
👍 點贊，你的認可是我創(chuàng)作的動力！
?? 收藏，你的青睞是我努力的方向！
?? 評論，你的意見是我進步的財富！