码迷,mamicode.com
首页 > 其他好文 > 详细

vue中的事件监听之——v-on vs .$on

时间:2018-10-19 13:58:00      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:head   console   mit   col   监听   说明   定义   body   alt   

跟着视频中老师的教学视频学vue的时候,看很多时候都用@(v-on)来监听子级emit的自定义事件,但在bus总线那块,又用.$on来监听bus自身emit的事件,v-on之间似乎相似但又不同,今天对照vue官网api学习并coding了相关代码,两者的用法与比较描述如下。

v-on vm.$on

可监听普通dom的原生事件;

可监听子组件emit的自定义事件;

 

监听当前实例的自定义事件

vue官网相关说明截图:

技术分享图片技术分享图片

由此可见,想监听vue实例自身自定义事件,只能用.$on并且这是vue实例的方法,不能用在普通dom上;

v-on用在在普通dom标签上,可以监听原生事件;用在vue组件标签上,可以监听子组件emit的自定义事件;

具体代码实践如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!--监听子组件emit的自定义事件-->
            <child @change="handleChange">child1</child>
            <child @change="handleChange">child2</child>
            <child @change="handleChange">child3</child>
        </div>
    </body>
    <script type="text/javascript" src="../js/vue.js" ></script>
    <script>
        var Child = {
            template:`<div @click=‘handleClick‘>
                <slot></slot>
            </div>`,
            methods:{
                handleClick(){
                    this.$emit( ‘change‘ );
                }
            },
            mounted(){
                //监听当前实例的自定义change事件
                this.$on( ‘change‘,function(){
                    console.log( ‘child-change-event-handler‘ );
                } );
            }
            
        };
        var vm = new Vue({
            el:‘#app‘,
            components:{
                Child,
            },
            methods:{
                handleChange(){
                    console.log( ‘parent-change-event-handler‘ );
                },
                handleClick(){
                    console.log( ‘handleClick‘ );
                }
            },
            mounted(){
                this.$on( ‘change‘,this.handleChange );
            }
        });
    </script>
</html>

 

vue中的事件监听之——v-on vs .$on

标签:head   console   mit   col   监听   说明   定义   body   alt   

原文地址:https://www.cnblogs.com/surfer/p/9815692.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!