唯品秀前端博客
当前位置: 前端开发 > Vue.js专区 > vue程序化的事件监听器，假装很牛逼的概念

vue程序化的事件监听器，假装很牛逼的概念

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

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

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差不多

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

赞(6) 打赏

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

支付宝
微信
赏 6

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

支付宝
微信
标签：

上一篇：

下一篇：

你可能感兴趣

共 0 条评论关于"vue程序化的事件监听器，假装很牛逼的概念"

博客简介

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

最近更新

随机文章

热门标签

caniuse兼容性 DaoVoice CDN大全 犸良动画 百度统计 百度收录 关键词排名 经典css片段 时间戳格式化 全国黑企名单 武汉黑企名单 996.ICU Js33个概念 vConsole DSBridge DOM元素进屏 Shareinstall Http接口测试 前端面试100问 Vue.js200问 Node.js上线 lodash.js 视频压缩 vue视图更新 windows激活 机场客户端 Eruda

精彩评论

友情链接

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

站点统计

  • 文章总数： 259 篇
  • 草稿数目： 0 篇
  • 分类数目： 16 个
  • 独立页面： 6 个
  • 评论总数： 913 条
  • 链接总数： 17 个
  • 标签总数： 461 个
  • 注册用户： 8421 人
  • 访问总量： 9300263 次
  • 最近更新： 2020年8月6日
服务热线：
 173xxxx7240

 QQ在线交流

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

 旺旺在线

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