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

作者：管理员 2019-02-27 20:33:32 分类：Vue2.js专栏阅读（5511） 0

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

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

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(6) 打赏

标签：

Vue 事件监听

上一篇：简单又实用的时间格式化插件Moment.js

下一篇：浅谈ES6中import * as xxx from几种常见导出基本用法

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

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

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

小结

相关推荐

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

点击取消