基于vue的页面导航栏组件

在vue的中，我们使用模块化进行开发，可以引入现成的第三方组件库，例如elementUI,vant组件库等等，当然我们可以自己定义一个组件库使用。下面我们将写一个自定义的页面导航栏组件

点击实现页面切换

1.组件的属性特征

在父组件中定义相关数据，以属性值传值的方式传递给子组件(props传参)，子组件根据相应的数据来渲染页面导航栏组件，相关数据也可以在控制当前页面所需要展示的内容。

export default {
props:{
// 记录当前页面
    current:{
        type: Number,
        default:8
    },
//  每一页存放的数据量
    pagenumber:{
        type:Number,
        default:10
    },
    // 导航栏最多可视页面数
    visnumber: {
        type:Number,
        default:10,
    },
    // 总共的数据量
    pagetotatal:{
        type:Number,
        default:302
    }
},

2.v-if和v-show的用法和区别

如果当前获取的数据只需要一个页面就可以渲染完毕，则不需要显示该组件。v-if和v-show都是用于控制组件的显示和隐藏，那么这两个指令有什么区别，又分别在什么情况下使用更方便呢

 <div class="pagenav-container" v-if="page > 1">
    <a :class="{disabled: current === 1 }" @click="handleclick(1)" v-show="this.current !== 1">|&lt;&lt;</a>
    <a :class="{disabled: current === 1 }" @click="handleclick(current - 1)">&lt;&lt;</a>
    <a v-for="(item) in pagelist" :key="item" :class="{active: current === item}" @click="handleclick(item)">{{item}}</a>
    <a :class="{disabled: current === page }"  @click="handleclick(current + 1)" >&gt;&gt;</a>
    <a :class="{disabled: current === page }" @click="handleclick(page)" v-show="this.current !== this.page"> &gt;&gt;|</a>
    <input type="text" placeholder="请输入跳转页面" @keyup.enter="handleclick(pagerouter)" v-model.number="pagerouter">
  </div>true

（1）v-if是根据表达式的值来判断是否生成vnode来间接判断是否生成dom树，true就生成dom树，如果为false则不生成dom树。v-show是一定会生成vnode也就间接导致了一定会生成dom树，他只控制dom的display属性，表达式值为true时不做任何处理（默认值），表达式值为false时属性值为none

（2）使用v-if可以有效的减少树的节点和渲染量，但也会导致树的不稳定;而使用v-show可以保持树的稳定但不能减少树的节点和渲染量。因此，在实际开发中，显示状态变化频繁的情况下应该使用v-show，以保持树的稳定﹔显示状态变化较少时应该使用v-if，以减少树的节点和渲染量。

3.组件事件（触发事件与监听事件）

自定义组件（子组件）本身的数据是从父组件调用过来自己没有权限直接调用，必须通过子组件来抛出事件，然后父组件监听事件后进行修改

触发事件和监听事件

// 触发事件
handleclick(newpage) {
        //  pagechange为需要监听的事件，newpage为传过去的值
        this.$emit("pagechange", newpage)
}
// 监听事件
@pagechange='handlepagechange' // 监听之后在handlepagechange函数中处理