Vue(三十)公共组件
以 分页 组件为例:(根据自己具体业务编写)
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(三十)公共组件的更多相关文章
- echart——vue封装成公共组件
<!-- 自定义Echarts * options: Object,//数据 * theme: String,//主题 * initOptions: Object,//初始化 * group: ...
- Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)
一.前言 1.公共轮播图的实现 2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...
- Vue (三) --- Vue 组件开发
------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...
- Vue(十五)组件
一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码 组件是自定义元素(对象) 2. 定义组件 ...
- Vue一次性简洁明了引入所有公共组件
使用场景 -在开发过程中,往往会有很多自己定义公用组件,我们通过import 导入,components挂载到实例上就行,项目刚开始还好,但是随着项目迭代,组件越来越多,同一个组件不同的方式用需要重复 ...
- Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- 剑指Offer(三十六):两个链表的第一个公共结点
剑指Offer(三十六):两个链表的第一个公共结点 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn.ne ...
- react初探(二)之父子组件通信、封装公共组件
一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...
- vue.js相关UI组件收集
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...
随机推荐
- String构造函数
只简单写了几个函数 class String { public: String(const char* pStr = NULL); String(const String& str); vir ...
- Consumer高级特性
Queue队列的消息一般是按照顺序各个队列依次获取消息,每次获取一个.所以假设有两个队列queue1,queue2,发送的消息为1.2.3.4.5.则默认情况下queue1获取到的消息为1.3.5,q ...
- 【干货】使用SIFT取证工作站校验文件哈希----哈希一致则文件具备完整性
此实验来源于课程活动部分:第1单元:计算机取证基础 1.3活动和讨论 活动:* nix系统中文件的基本散列 注意:本博客更多的信息可能没有交代完善,有的人看不明白是因为,我知道,但是没有写出来.本 ...
- 【easy】438.Find All Anagrams in a String 找出字符串中所有的变位词
Input: s: "abab" p: "ab" Output: [0, 1, 2] Explanation: The substring with start ...
- 各种手工DIY
http://www.guokr.com/scientific/subject/diy/ 高仿宜家莲花灯 http://www.guokr.com/article/179863/ 做一只会发光的魔幻吊 ...
- cocos2dx模拟器修改窗口大小
修改模拟器窗口大小SimulatorWin.cpp搜索 frameSize修改frameSize = Size(1920*0.9, 1080*0.9);
- SQL优化(面试题)
因为现在面试经常需要问的需要SQL优化,问的具体操作步骤时候的常见做法,所以网上总结这些操作步骤: SQL优化的具体操作: 1.在表中建立索引,优先考虑where.group by使用到的字段. 2. ...
- MVC设计模式的简单理解
MVC介绍 众所周知MVC不是设计模式,是一个比设计模式更大一点的模式,称作设计模式不合理,应该说MVC它是一种软件开发架构模式,它包含了很多的设计模式,最为密切是以下三种:Observer (观察者 ...
- C#截取用户的点击事件的代码
在代码过程中中,把做工程过程中常用的代码备份一下,如下代码内容是关于C#截取用户的点击事件的代码,应该是对大家也有好处. private void SomeControl_KeyDown(object ...
- TPshop之短信注册配置(阿里云)
短信注册准备: 1.阿里云账号实名认证(申请地址: https://www.aliyun.com/ , 注意不是阿里大于短信平台) 步骤: 注册登录阿里云——找到控制台 鼠标放在左上角,弹出菜 ...