vue的$emit和$on

最新推荐文章于 2024-07-04 10:41:11 发布

mldwyy

最新推荐文章于 2024-07-04 10:41:11 发布

阅读量499

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/mldwyy/article/details/104934246

版权

1.它们是干什么用的，能帮我们做什么？
通过$on我们可以自定义一个事件，并且为这个事件添加对应的处理函数，通过$emit可以触发自定义的事件，执行它对应的处理函数
好处：能够将事件定义和消费分开，实现逻辑解耦
2.该如何使用它们：
2.1通过$on()方法注册一个自定义事件’myEvent’（当然可以取其他名字），并添加事件的处理函数，如下：(handleEvent是我自定义的处理函数）

 this.$on('myEvent',this.handleEvent)

2.2 通过$emit()方法触发事件’myEvent’，并为这个事件对应的处理函数添加所需参数，如下：

 this.$emit('myEvent','hello')

完整代码如下：

<body>
<div id="app">
    <button @click="clickHandle">click</button>
</div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{},
        created(){
            this.$on('myEvent',this.handleEvent)
        },
        methods:{
            handleEvent(e){
                console.log(e)
            },
            clickHandle(){
                this.$emit('myEvent','hello')
            }
        }
    })
</script>

3.扩展用法
3.1 可以为多个自定义事件添加同一个处理函数

var vm=new Vue({
        el:"#app",
        data:{},
        created(){
            /*通过给$on的第一个参数添加数组的方式为不同的事件添加处理函数*/
            this.$on(['myEvent','myEvent1'],this.handleEvent)
        },
        methods:{
            handleEvent(e){
                console.log(e)
            },
            clickHandle(){
                this.$emit('myEvent1','hello')
            }
        }
    })

3.2可以为一个自定义事件添加多个处理函数（先定义的先触发）

var vm=new Vue({
        el:"#app",
        data:{},
        created(){
            /*通过给$on的第一个参数添加数组的方式为不同的事件添加回调函数*/
            this.$on('myEvent',this.handleEvent)
            this.$on('myEvent',this.handleEvent1)
        },
        methods:{
            handleEvent(e){
                console.log(e)
            },
            handleEvent1(e){
                console.log(e+" hi")
            },
            clickHandle(){
                this.$emit('myEvent','hello')
            }
        }
    })

点击按钮输出：
hello
hello hi

mldwyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的$emit和$on

1.它们是干什么用的，能帮我们做什么？通过$on我们可以自定义一个事件，并且为这个事件添加对应的处理函数，通过$emit可以触发自定义的事件，执行它对应的处理函数好处：能够将事件定义和消费分开，实现逻辑解耦2.该如何使用它们：2.1通过$on()方法注册一个自定义事件’myEvent’（当然可以取其他名字），并添加事件的处理函数，如下：(handleEvent是我自定义的处理函数） th...
复制链接

扫一扫