element-ui组件扩展--自定义分页组件

element-ui组件扩展–自定义分页组件

*想要封装好一个组件，必须要熟练掌握这三个知识点：
1.父组件传值到子组件（props）
2.子组件传值到父组件（$emit）3.插槽使用（slot）。对于一个独立的组件，props是用来为组件内部注入核心内容；$emit用来使这个组件通过一些操作来融入其它组件中。

1.element-UI安装及引用

根据element-ui的官方文档 官网地址:http://element.eleme.io/#/zh-CN 使用npm或者cnpm(淘宝镜像)执行下面命令即可安装npm install element-ui -S

在main.js中引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
 

Vue.use(ElementUI);

new Vue({
el: ‘#app’,
render: h => h(App)
});

2.新建一个Pagination.vue页面

在components文件夹新建一个Pagination.vue页面

/*** 分页组件*/
 

3.分页组件的引入，调用

在需要使用该组件的页面
引入该组件：

import Pagination from '../../../components/Pagination'

调用该组件

v-bind:child-msg="pageparm" @callFather="callFather" class="pagtn" >

定义分页参数

  export default {  data() {    
		return {
		  // 分页参数   
		     pageparm: {     
		        currentPage: 1,   
		        pageSize: 10,    
		       total: 10    
		         },
		  }
		}

分页赋值

methods: {
        // 分页插件事件 
        callFather(parm) {     
            this.formInline.current_page = parm.currentPage;   
            this.formInline.page_size = parm.pageSize;         
            //this.getdata(); //数据刷新
             },
           }