1 全局事件总线bus
全局事件总线是组件间的一种通信方式,适用于任意组件间通信。
1.1 注册
在main.js文件初始化,
beforeCreate() {
Vue.prototype.$bus = this
},
//适用于兄弟之间传参或者执行某一段业务
//search组件需要告知header组件 清空keyword
RemoveKeyWord() {
this.ParamsInit();
this.SearchParams.keyword = undefined;
//同时通过$bus 清理兄弟组件中的关键字 当然也可以进行传参例如我传入一个字符串test
this.$bus.$emit('clearKeyWord','test')
if (this.$route.query) {
this.$router.push({ name: "search", query: this.$route.query });
}
},
//header.vue 组件需要通过监听 search组件的操作来进行输入框的清空
mounted(){
//通过$bus监听到兄弟组件触发的清除事件 则进行keyword的清空
this.$bus.$on('clearKeyWord',(str)=>{
//那么这边就会接受到test字符串
console.log(str,'test')
this.keyword = '';
})
},
引用来源:
2 自定义事件
3 当页面跳转时,路由跳转,切换到的页面始终在顶部
export default new VueRouter({
routes,
scrollBehavior(to, from, savePosition) {
return { y: 0 };
},
});
4 分页器组件
4.1 分页器原理
pageNode:当前第几页
total:总数据量
pageSize:每页数据个数
连续页码数