其實(shí)就是父子組件之前的傳值，以及事件響應(yīng)
1??準(zhǔn)備好子組件的數(shù)據(jù)輸入菊匿，定好 props 里面的數(shù)據(jù)舱殿、類型。
子組件：
?<div class="pagination">
? ? <el-pagination
? ? ? @size-change="handleSizeChange"
? ? ? @current-change="handleCurrentChange"
? ? ? :current-page.sync="pageNo"
? ? ? :page-sizes="pageSizes"
? ? ? :page-size.sync="curSize"
? ? ? :layout="layout"
? ? ? :total="total"
? ? >
? ? </el-pagination>
? </div>
這個(gè)就是頁碼組件（單獨(dú)的一個(gè)子頁面皆愉，），在通過props接收傳入?yún)?shù)（父組件傳給子組件的值）
子組件：
?props: {
? ? currentPage: {
? ? ? type: Number,
? ? ? default: 1,
? ? },
? ? pageSizes: {
? ? ? type: Array,
? ? ? default() {
? ? ? ? return [10, 20, 30, 40];
? ? ? },
? ? },
? ? pageSize: {
? ? ? type: Number,
? ? ? default: 10,
? ? },
? ? total: {
? ? ? type: Number,
? ? },
? ? layout: {
? ? ? type: String,
? ? ? default: 'total, sizes, prev, pager, next, jumper',
? ? },
3.準(zhǔn)備好組件的數(shù)據(jù)輸出。即根據(jù)組件邏輯幕庐，做好要暴露出來的方法久锥。（后面詳解）
$emit的使用(暴露組件方法)
子組件：
methods: {
? ? handleSizeChange() {
? ? ? this.$emit('getList');
? ? },
? ? handleCurrentChange() {
? ? ? this.$emit('getList');
? ? },
? },
父組件中有一個(gè)getList（）的獲取數(shù)據(jù)的方法，异剥，瑟由，將父組件的方法注入子組件 ?@getList="getList"?，然后在子組件中通過 $emit 調(diào)用他冤寿，并傳遞參數(shù)歹苦。達(dá)到修改的目的。
父組件：
<
? ? ? :current-page.sync="listQuery.pageNo"
? ? ? :page-size.sync="listQuery.pageSize"
? ? ? :total="rows"
? ? ? @getList="getList"
? ? >
? ? </Pagination>
