Vue实战项目注意点-part5(分页器、bus)

69 阅读1分钟

1 全局事件总线bus

全局事件总线是组件间的一种通信方式,适用于任意组件间通信。

1.1 注册

main.js文件初始化,
beforeCreate() {
		Vue.prototype.$bus = this
	},

image.png

//适用于兄弟之间传参或者执行某一段业务 
 
 
//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 = ''; 
    })
  },

引用来源:

blog.csdn.net/m0_57547956…

blog.csdn.net/qq_31676483…

2 自定义事件

3 当页面跳转时,路由跳转,切换到的页面始终在顶部

export default new VueRouter({
  routes,
  scrollBehavior(to, from, savePosition) {
    return { y: 0 };
  },
});

4 分页器组件

4.1 分页器原理

pageNode:当前第几页
total:总数据量
pageSize:每页数据个数
连续页码数

blog.csdn.net/qq_48113035…