唯品秀前端博客
当前位置: 前端开发 > Vue.js专区 > vue程序化的事件监听器

vue程序化的事件监听器

2019-02-27 分类：Vue.js专区 作者：管理员 阅读（1079）

官方名字真是苦涩难懂，这个东西就是事件监听，监听一个事件，当事件触发时候就可以进行回调函数操作，逼格根本不高，贴点网上代码感受下：

1
2
3
4
5
6
7
const timer = setInterval(() =>{                    
    // 某些定时器操作                
}, 500);            
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
})

其实我想问beforeDestroy前面的hook干嘛的？似乎百度小伙伴都没疑问？就我好奇吗？难道是原生的生命周期监听就要这么搞？不懂，有知道的给我留言解释下

监听到生命周期函数beforeDestroy，也就是在组件销毁之前，回调函数就可以去清除上面定时器，$once、$on、$off的使用，这里送上官网的地址教程，在程序化的事件侦听器那里

再来个稍微复杂点的代码去感受下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>程序化的事件监听器</title>
  </head>
  <body>
    <div id="app">
      <div v-if="isShow">嘻嘻嘻</div>
      <button @click="des">销毁</button>
      <button @click="show">点击</button>
      <div id="toast"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script>
    <script>
      var Toast = Vue.extend({
        template: '<div> <button @click="show">打印</button> </div>',
        created() {
          this.$on('print', () => {
            console.log('打印好东西，哈哈哈');
          });
        },
        methods: {
          show() {
            this.$emit('print');
          }
        }
      });
      var toast = new Toast();
      var vm = new Vue({
        el: '#app',
        data: function() {
          return {
            isShow: true
          };
        },
        created() {
          this.$on('show', () => {
            console.log('嘻嘻嘻');
          });
          this.$once('hook:beforeDestroy', () => {
            toast.$destroy();
            console.log(1)
          });
        },
        methods: {
          show() {
            this.$emit('show');
            this.isShow = this.isShow ? false : true;  //变量取反
            if (!toast.$el) {
              toast.$mount('#toast');
            }
          },
          des() {
            vm.$destroy();
            console.log(3)
          }
        },
        destroyed() {
          console.log('实例已经销毁了');
          console.log(2)
        }
      });
    </script>
  </body>
</html>

最后再来认识下vue中的生命周期单词

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
beforeCreate: function(){
        console.log(this);
        showData('创建vue实例前',this);
    },
    created: function(){
        showData('创建vue实例后',this);
    },
    beforeMount:function(){
        showData('挂载到dom前',this);
    },
    mounted: function(){
        showData('挂载到dom后',this);
    },
    beforeUpdate:function(){
        showData('数据变化更新前',this);
    },
    updated:function(){
        showData('数据变化更新后',this);
    },
    beforeDestroy:function(){
        vm.test ="3333";
        showData('vue实例销毁前',this);
    },
    destroyed:function(){
        showData('vue实例销毁后',this);
    }

小结

重点：$on可以监听由this.$emit触发的自定义事件，同时可以可以接收触发时候传过去的参数，并且还能监听生命周期钩子事件，在钩子事件名称前加:hook:，因此，通过事件监听可以用于父子组件传值时候，子组件触发父组件自定义事件，父组件可以监听自定义事件是否被触发，从而改变父组件中的data。

当然，如果只是父子数据传递，真的这么做，那就是脱裤子放屁了，因为既然使用了自定义事件，那干嘛不直接在自定义事件中去做完所有事，何必再另外去监听自定义事件从而改变父组件中的data。然而神奇的是，这家伙能做子组件传递给祖父组件数据之间的通信，屌不屌？其实这个和eventBus差不多

「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(5) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
赏 5

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签：

上一篇：

下一篇：

你可能感兴趣

共有 0 条评论 - vue程序化的事件监听器

博客简介

唯品秀博客: weipxiu.com，一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与 

最近更新

随机文章

热门标签

caniuse兼容性 阿里CDN CDN大全 博主Github 百度统计 百度收录 关键词排名 经典css片段 时间戳格式化 全国黑企名单 武汉黑企名单 996.ICU火了 Js33个概念 vConsole DSBridge DOM元素进屏 Shareinstall Http接口测试 前端面试100问 Vue.js200问 Node.js上线

精彩评论

友情链接

他们同样是一群网虫，却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步，但同学却不局限在一国一校，而是遍及全球！申请交换友链

站点统计

  • 文章总数： 231 篇
  • 草稿数目： 0 篇
  • 分类数目： 14 个
  • 独立页面： 6 个
  • 评论总数： 847 条
  • 链接总数： 12 个
  • 标签总数： 416 个
  • 建站时间： 980 天
  • 注册用户： 1856 人
  • 访问总量： 8653061 次
  • 最近更新： 2019年8月22日
服务热线：
 173xxxx7240

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺在线

点击这里给我发消息
点击这里给我发消息