以 分页 组件为例:(根据自己具体业务编写)

1.pagination.vue

<template>
<!-- 分页 -->
<div class="table-pagination" v-if="flag">
<template>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[10, 20, 30]"
:page-size="pageSize"
:total="totalCount"
layout="total, sizes, prev, pager, next">
</el-pagination>
</div>
</template>
</div>
</template> <script>
export default {
name: 'my-pagination',
props: {
flag: Boolean,
page: Number,
pageSize: Number,
totalCount: Number
},
methods: {
handleSizeChange (val) {
this.$emit('handleSizeChange', val)
},
handleCurrentChange (val) {
this.$emit('handleCurrentChange', val)
}
}
}
</script>

2.新建一个utils文件夹,然后新建一个global.js

/*
** 公共组件
*/ import Pagination from '../components/common/pagination/Pagination.vue' const global = (Vue) => {
if (global.installed) return
Vue.component('my-pagination', Pagination) // 注册全局分页组件
} export default global

3.在main.js中引入js

import Global from './utils/global'

Vue.use(Global) // 注册全局组件

4.直接在页面中引入

<my-pagination
@handleSizeChange='handleSizeChange'
@handleCurrentChange='handleCurrentChange'
:flag='flag'
:page='page'
:pageSize='pageSize'
:totalCount='totalCount'>
</my-pagination>

Vue(三十)公共组件的更多相关文章

  1. echart——vue封装成公共组件

    <!-- 自定义Echarts * options: Object,//数据 * theme: String,//主题 * initOptions: Object,//初始化 * group: ...

  2. Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)

    一.前言                    1.公共轮播图的实现                    2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...

  3. Vue (三) --- Vue 组件开发

    ------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...

  4. Vue(十五)组件

    一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码 组件是自定义元素(对象) 2. 定义组件 ...

  5. Vue一次性简洁明了引入所有公共组件

    使用场景 -在开发过程中,往往会有很多自己定义公用组件,我们通过import 导入,components挂载到实例上就行,项目刚开始还好,但是随着项目迭代,组件越来越多,同一个组件不同的方式用需要重复 ...

  6. Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  7. 剑指Offer(三十六):两个链表的第一个公共结点

    剑指Offer(三十六):两个链表的第一个公共结点 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn.ne ...

  8. react初探(二)之父子组件通信、封装公共组件

    一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...

  9. vue.js相关UI组件收集

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...

随机推荐

  1. L1-Day8

    1.他就是我昨天见的那个人. [我的翻译]He is a man who I saw him yestorday. [标准答案]He is the man (who(m) /that) I saw y ...

  2. MariaDB Galera Cluster部署实践

    原理 官方地址:http://galeracluster.com/documentation-webpages/index.html Galera Cluster与传统的复制方式不同,不通过I/O_t ...

  3. python知识点

    if __name__ == 'main' 一个python的文件有两种使用的方法,第一是直接作为脚本执行,第二是import到其他的python脚本中被调用(模块重用)执行. 因此if __name ...

  4. Debian 命令行方式配置网络

    一.对于有线网络,如果默认没有安装图形界面,进入了 multi-user.target中时,是没有使用NetworkManager管理网络的,此时需要手动配置才能上网 首先得到网卡名称:ip addr ...

  5. Windows Server 2012安装.NET Framework 3.5

    1 文件获取地址 链接:https://pan.baidu.com/s/1o7wykEKKrzbVslSeHbBigA 提取码:e59o 2 安装原因 在Windows Server 2012上安装一 ...

  6. APP的三种开发模式

    转载于http://pleasureswx123.github.io/2014/09/15/APP%E7%9A%84%E4%B8%89%E7%A7%8D%E5%BC%80%E5%8F%91%E6%A8 ...

  7. ansible-plabybook 常用的有用的命令

    ansible-plabybook 常用的有用的命令 ansible-playbook常用的非常有用的参数有: -C ,大写c ,这个命令的意思就是模拟执行,会告诉你跑完这个playbook会发生什么 ...

  8. ORA-01466: 无法读取数据 - 表定义已更改

    前几天同事同事误删除数据,经查询发现数据在7:13分时候还是全量 628W行: 于是他将现在的表复制了个备份,其中有数据200W: 于是为了省事,想要直接闪回全表,就把这个表truncate了.... ...

  9. 中位数——二维坐标下的中位数lightoj1349

    第一次碰到这种题,不知所措,题解链接 => https://www.cnblogs.com/fu3638/p/7426074.html #include<bits/stdc++.h> ...

  10. SpringBoot 整合Dubbo

    RPC框架可参考:https://blog.csdn.net/top_code/article/details/54615853 整合可参考:https://www.dalaoyang.cn/arti ...