Vue2:按下回车键,调用页面查询

近期产品提出一个需求,用户页面中输入查询参数后,点击回车就能够调用查询功能,自己在网上搜了下实现代码,然后结合自己的想法封装了一个方法,提供大家参考,有更好的提议,可以留言.

1.代码思路:监听用户在页面中按下回车键:然后根据window.loction.hash获取到当前的路由信息.根据访问的路由地址,找到对应页面中的方法.通过bus使两个页面之间调用方法.实现刷新功能

代码实现:

1在index.vue文件中,由于我的页面元素都是通过index.vue页面展示出来,所以我直接在index页面中创建监听用户按下回车的事件.

created(){
//页面初始化的时候就注册该方法 才能监听到用户按下键盘的操作
    this.keyupEnter()
 },


methods:{
      keyupEnter(){
        document.onkeydown = e =>{
          //按下键盘回车
            if (e.keyCode === 13) {
              //截取路径 hash模式 :#/index  => index
              let arrd = window.location.hash.substring(window.location.hash.indexOf('/')+1,window.location.hash.length)
                if(window.location.href.indexOf(arrd) !== -1){
                  //提交信息 this.bus.$on 接收的时候 调用页面的查询方法  ${arrd}:路由: 如 index   => indexUpkey  this.bus.$on('indexUpkey',val=>{需要处理的操作})
                   //this.bus.$emit('名称',值)
                  this.bus.$emit(`${arrd}Upkey`)
                }
            }
        }
      },
}

2.在需要用到按下调用刷新的页面中 接收index.vue传递的信息

mounted() {   

   //因为this.bus.$on 只有会在 this.bus.$emit调用的时候才会触发$on 所以写在这里,第一次进入页面也不会触发,  this.bus.$emit ('名称',传递的值)  和 this.bus.$on('名称',接收值:val={}) 俩名称需要一致,否则就算触发了$emit  但是 $emit 和 $on 的名称不一致,他们两也是没有关系的,当然也就接收不到$emit传递的数据

    this.bus.$on('userUpkey',()=>{
            //调用该页面的查询方法
              this.upDownScan()

    })

  },

这次分享就结束了