官方名字真是苦涩难懂,这个东西就是事件监听,监听一个事件,当事件触发时候就可以进行回调函数操作,逼格根本不高,贴点网上代码感受下:
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差不多
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"vue程序化的事件监听器,假装很牛逼的概念"
最新评论