vue.js 组件实现简单分页效果

最新推荐文章于 2024-08-01 17:00:44 发布

易兒善

最新推荐文章于 2024-08-01 17:00:44 发布

阅读量3.3w

点赞数 8

分类专栏： vue-js 文章标签： vue-js 分页

本文链接：https://blog.csdn.net/yiershan1314/article/details/62215505

版权

这篇博客介绍了如何用vue.js将分页效果转化为一个简单组件。通过组件化，接收父组件传入的分页数据、列名和信息，并通过事件传递更新的分页信息。内容包括组件创建、props传参、模板定义、计算属性和组件事件的使用。提供了简化后的HTML和JavaScript代码，并附带了源码下载链接。

摘要由CSDN通过智能技术生成

前言

为了练习vue.js 之前做了一个vue.js前端分页效果，后面看到vue.js组件内容，就试着把这个功能写成一个简单组件，向组件元素传递一个object参数，包含分页数据，显示的列名信息，分页信息，组件提供一个事件，传递给父元素一个分页信息，父元素拿着分页信息获取数据，修改之前的object。这样就实现了分页效果。

效果

这里写图片描述

知识点

components 组件
props 父级向组件传参
template 模板
computed 计算属性
$emit() 组件事件，组件先父级元素传参

html内容

对比之前html内容简洁多了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> CommonTest</title>
    <link rel="stylesheet" href="../bootstrap.min.css" />
</head>
<body>
    <div class="container body-content">
        <header>
            <h2>vue.js组件分页效果</h2>
        </header>
        <div id="test" class="form-group">
           <my-component v-on:show-page="getPageData" v-bind:pager-data="pagerData"></my-component>
        </div>
        <hr />
        <footer>
            <p>&copy; 2017 - 易兒善</p>
        </footer>