Vuejs2.0 method for implementing paging components using $ emit for event listening data transfer _ javascript skills

This article mainly introduces how to use the $ emit for event listening data transmission of the paging component of vuejs2.0, which is very good and has reference value ,, for more information about how to use the $ emit feature to transmit event monitoring data, see this article ,, for more information, see

The previous article introduced the simple paging implemented by vuejs. If several pages require paging effect, it is impossible to copy the code on every page, which means encapsulate the code, become a common component.

First, use the basic Vue constructor to create a "subclass", Vue. extend (options)

Var barHtml ='
'+'
 
 

  
  
'+'
  
  
Previous Page
'+'
  
  
Previous Page
'+'
  
  
'+' {Index} '+'
'+'
  
  
Next Page
'+'
  
  
Next Page
'+'
  
  
Total{All }}Page
'+'
 
 
'+'
'; 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;

A global pagenav is created here and can be called elsewhere.

Html code

 
   
{{msg}}

Css code

.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;}

Create a vue object instance

Var pageBar = new Vue ({el: '# page', data: {all: 8, // total number of pages cur: 1, // current page msg :''}, components: {'vue-nav': pagenav}, watch: {cur: function (oldValue, newValue) {console. log ('value before and after the cur listener: '); console. log (arguments) ;}}, methods: {listenDate: function (data) {this. cur = data; this. msg = 'you clicked' + data + 'page ';}}})

Js encapsulates the paging component.

Effect