vuejs2.0实现分页组件，使用$emit进行事件监听数据传递

最新推荐文章于 2023-08-24 14:48:33 发布
最新推荐文章于 2023-08-24 14:48:33 发布
阅读量134 收藏
点赞数
分类专栏： 前端 文章标签： vuejs $emit 分页组件
原文链接：https://www.mk2048.com/blog/blog.php?id=kk0jkk1ikaa&title=vuejs2.0%E5%AE%9E%E7%8E%B0%E5%88%86%E9%A1%B5%E7%BB%84%E4%BB%B6%EF%BC%8C%E4%BD%BF%E7%94%A8%24emit%E8%BF%9B%E8%A1%8C%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC%E6%95%B0%E6%8D%AE%E4%BC%A0%E9%80%92
版权

上一篇文章介绍了vuejs实现的简单分页，如果我有几个页面都需要有分页效果，不可能每个页面都去复制一下这段代码吧，意思是封装一下，变成通用的组件。

首先使用基础 Vue 构造器，创建一个“子类”,Vue.extend( options )

var barHtml = '<div class="page-bar">' 
                    '<ul>' 
                        '<li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>' 
                        '<li v-if="cur==1"><a class="banclick">上一页</a></li>' 
                        '<li v-for="index in indexs"  v-bind:class="{ active: cur == index}">' 
                            '<a v-on:click="btnclick(index)">{{ index }}</a>' 
                        '</li>' 
                        '<li v-if="cur!=all"><a v-on:click="cur  ,pageClick()">下一页</a></li>' 
                        '<li v-if="cur == all"><a class="banclick">下一页</a></li>' 
                        '<li><a>共<i>{{all}}</i>页</a></li>' 
                    '</ul>' 
                '</div>';
    var navBar = Vue.extend({
        template:barHtml,
        props:['all','cur'],
        computed: {
            indexs: function(){
              var left = 1;
              var right = this.all;
              var ar = [];
              if(this.all>= 5){
                if(this.cur > 3 && this.cur < this.all-2){
                        left = this.cur - 2
                        right = this.cur   2
                }else{
                    if(this.cur<=3){
                        left = 1
                        right = 5
                    }else{
                        right = this.all
                        left = this.all -4
                    }
                }
             }
            while (left <= right){
                ar.push(left)
                left   
            }
            return ar
           }     
        },
        methods: {
            btnclick: function(data){
                if(data != this.cur){
                    this.cur = data;
                    this.$emit('btn-click',data); 
                }
            },
            pageClick: function(){
                this.$emit('btn-click',this.cur);
            }
        },    
    });
    window.pagenav = navBar;

这儿创建了一个全局的pagenav，可以在其它地方都可以调用。

html代码

<div id="page">
    <vue-nav :cur.sync="cur" :all.sync="all" v-on:btn-click="listenDate"></vue-nav>
    <p style="margin-left:40px;">{{msg}}</p>
</div>

css代码

.page-bar{
    margin:40px;
}
ul,li{
    margin: 0px;
    padding: 0px;
}
li{
    list-style: none
}
.page-bar ul{
    overflow: hidden;
}
.page-bar li{
    float: left;
}
.page-bar li:first-child>a {
   margin-left: 0px
}
.page-bar a{
    display: block;
    border: 1px solid #ddd;
    text-decoration: none;
    position: relative;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    cursor: pointer
}
.page-bar a:hover{
    background-color: #eee;
}
.page-bar a.banclick{
    cursor:not-allowed;
}
.page-bar .active a{
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
}
.page-bar i{
    font-style:normal;
    color: #d44950;
    margin: 0px 4px;
    font-size: 12px;
}

新建一个vue对象实例

var pageBar = new Vue({
        el: '#page',
        data: {
            all: 8, //总页数
            cur: 1,//当前页码
            msg:''
        },
        components:{
            'vue-nav':pagenav
        },
        watch: {
            cur: function(oldValue , newValue){
                console.log('监听cur前与后的值：');
                console.log(arguments);
            }
        },    
        methods:{
            listenDate:function(data){
                this.cur = data;
                this.msg = '你点击了' data  '页';
            }
      }
    })

简单的用js封装了一下分页组件。

实现效果

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="js/vue.min2.js"></script>
<style>
.page-bar{
    margin:40px;
}
ul,li{
    margin: 0px;
    padding: 0px;
}
li{
    list-style: none
}
.page-bar ul{
    overflow: hidden;
}
.page-bar li{
    float: left;
}
.page-bar li:first-child>a {
   margin-left: 0px
}
.page-bar a{
    display: block;
    border: 1px solid #ddd;
    text-decoration: none;
    position: relative;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    cursor: pointer
}
.page-bar a:hover{
    background-color: #eee;
}
.page-bar a.banclick{
    cursor:not-allowed;
}
.page-bar .active a{
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
}
.page-bar i{
    font-style:normal;
    color: #d44950;
    margin: 0px 4px;
    font-size: 12px;
}
</style>
</head>
<body>
<div id="page">
    <vue-nav :cur.sync="cur" :all.sync="all" v-on:btn-click="listenDate"></vue-nav>
    <p style="margin-left:40px;">{{msg}}</p>
</div>

<script type="text/javascript">
    var barHtml = '<div class="page-bar">' 
                    '<ul>' 
                        '<li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>' 
                        '<li v-if="cur==1"><a class="banclick">上一页</a></li>' 
                        '<li v-for="index in indexs"  v-bind:class="{ active: cur == index}">' 
                            '<a v-on:click="btnclick(index)">{{ index }}</a>' 
                        '</li>' 
                        '<li v-if="cur!=all"><a v-on:click="cur  ,pageClick()">下一页</a></li>' 
                        '<li v-if="cur == all"><a class="banclick">下一页</a></li>' 
                        '<li><a>共<i>{{all}}</i>页</a></li>' 
                    '</ul>' 
                '</div>';
    var navBar = Vue.extend({
        template:barHtml,
        props:['all','cur'],
        computed: {
            indexs: function(){
              var left = 1;
              var right = this.all;
              var ar = [];
              if(this.all>= 5){
                if(this.cur > 3 && this.cur < this.all-2){
                        left = this.cur - 2
                        right = this.cur   2
                }else{
                    if(this.cur<=3){
                        left = 1
                        right = 5
                    }else{
                        right = this.all
                        left = this.all -4
                    }
                }
             }
            while (left <= right){
                ar.push(left)
                left   
            }
            return ar
           }     
        },
        methods: {
            btnclick: function(data){
                if(data != this.cur){
                    this.cur = data;
                    this.$emit('btn-click',data); 
                }
            },
            pageClick: function(){
                this.$emit('btn-click',this.cur);
            }
        },    
    });
    window.pagenav = navBar;
    var pageBar = new Vue({
        el: '#page',
        data: {
            all: 8, //总页数
            cur: 1,//当前页码
            msg:''
        },
        components:{
            'vue-nav':pagenav
        },
        watch: {
            cur: function(oldValue , newValue){
                console.log('监听cur前与后的值：');
                console.log(arguments);
            }
        },    
        methods:{
            listenDate:function(data){
                this.cur = data;
                this.msg = '你点击了' data  '页';
            }
      }
    })
</script>
</body>
</html>
View Code

 


更多专业前端知识，请上 【猿2048】www.mk2048.com
qq_45670012
关注
专栏目录
vue2.0实现分页组件的实例代码
08-30
主要介绍了vue2.0实现分页组件的实例代码,需要的朋友可以参考下
vue2.0 #$emit,$on的使用
热门推荐
m0_37068028的博客
06-07 2万+
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用，改用$emit,$on
vue2.0 中#$emit,$on的使用详解
weixin_30493321的博客
02-05 186
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用，改用$emit,$on vm.$on( event, callback ) 监听当前实例上的自定义事件。时间可以由vm.$emit触发。回调函数会接受所有传入事件触发函数的额外参数。 vm.$emit(event,[...args]) 触发当前实例上的自定义事件。附加参数都会传给监听器回调。 例子： ...
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
10-20
在深入探讨如何使用Vue.js 2.0实现分页组件并通过$emit事件监听数据传递之前，我们需要先了解Vue.js的几个核心概念，比如组件化、props、计算属性(computed)、事件监听($emit)以及插槽(slots)。 组件化是Vue.js框架...
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
通常情况下，当父组件需要监听子组件发出的事件时，我们会在子组件内部使用$emit来触发一个自定义事件，然后在父组件上使用$on来监听这个事件。但在某些特殊情况下，如果子组件中的this指向不是父组件实例，那么$...
Vue.js 2.0 实现分页组件的事件监听数据传递方法
Vuejs 2.0 实现分页组件使用 $emit 进行事件监听数据传递的方法 Vuejs 2.0 是一个流行的前端框架，用于构建复杂的 Web 应用程序。分页组件是 Web 应用程序中常见的组件之一，用于限制数据的显示数量，提高用户体验...
vuejs使用$emit和$on进行组件之间的传值的示例
11-26
5. 在子组件中，通过 `@click` 事件监听用户的点击行为，然后调用 `propInstCode` 和 `propInstName` 方法，使用 `$emit` 触发事件并传递所需的值（机构代码和机构名称）到总线。 6. 最后，父组件的视图层根据接收到...
vue2.0父子、兄弟组件通信，$emit使用
weixin_34138521的博客
12-18 256
组件通信 1.父组件传递数据给子组件 父组件数据如何传递给子组件呢？可以通过props属性来实现 父组件： <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; }...
Vue2.0基本用法之组件的注册和传值(父子props，插槽，$emit)和学写购物车
m0_62927182的博客
06-06 1137
vue组件传值和购物车的练习
关于vue分页加载、通过监听滚动条方式分页，单页vue
柠檬酸
10-20 2300
单页vue2、vue3监听滚动条实现分页加载下一页
vue如何使用elementui分页器，前端分页器
weixin_46371752的博客
02-23 2389
这里是展示的表格，将后端的数据以表格的形式展示出来 <el-table :data="tableDatas" style="width: 500px"> <el-table-column style="height: 100px" prop="username" label="职工号" width="120"> ..
vue开发分页组件
lihefei_coder的博客
03-10 2339
组件效果图 组件用法 <pagination :show-jumper="true" :total="100" :currentPage="20" :pagerCount="7" @prev-click="prevClick" @next-click="nextClick" @prev-quick-click="prevQuickCl...
vue Pagination 简单封装分页组件
DevilAngelia的博客
07-14 893
代码】vue简单封装分页组件。
vue el-tree 键盘监听实现上一页下一页
kan_Feng的博客
10-08 493
el-tree 键盘监听实现上一页下一页
Vue分页监听
qq_43026206的博客
08-30 528
分页监听
vue click事件_Notes08事件监听von
weixin_39841002的博客
12-06 223
点击二白夫人不许错过我事件监听v-on••••操作软件:Webstorm插件：vue.js //从官网下载https://cn.vuejs.org/v2/guide/installation.html在前端开发中，我们需要经常和用于交互，这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等。在Vue中如何监听事件呢？用v-on指令v-on介绍：作用：绑定事件监听器；缩写...
vue2项目实现上一页下一页功能
最新发布
xiaoming4965的博客
08-24 1559
vue2项目实现上一页下一页功能
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值