vue.js中this.$emit的理解

最新推荐文章于 2024-05-24 10:20:23 发布

置顶有一个王小森

最新推荐文章于 2024-05-24 10:20:23 发布

阅读量7.5w

点赞数 14

分类专栏： vue.js 文章标签： vue-js this-emit 触发自定义函数

本文链接：https://blog.csdn.net/wangxiaoxiaosen/article/details/75258013

版权

vue.js 专栏收录该内容

43 篇文章 3 订阅

订阅专栏

对于vue.js中的this. $emit的理解： this.$ emit(‘increment1’,”这个位子是可以加参数的”)；其实它的作用就是触发自定义函数。
看例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script src="vue.js"></script>
<body>
<div id="counter-event-example">
    <p>{{ total }}</p>
    <button-counter v-on:increment1="incrementTotal1"></button-counter>
    <button-counter v-on:increment2="incrementTotal2"></button-counter>
</div>
</body>

<script>
    Vue.component('button-counter', {
        template: '<button v-on:click="increment">{{ counter }}</button>',
        data: function () {
            return {
                counter: 0
            }
        },
        methods: {
            increment: function () {
                this.counter += 1;
                this.$emit('increment1',"这个位子是可以加参数的");//触发自定义increment1的函数。此处的increment1函数就是 incrementTotal1函数。
//                this.$emit('increment2');  //此时不会触发自定义increment2的函数。

            }
        }
    });
    new Vue({
        el: '#counter-event-example',
        data: {
            total: 0
        },
        methods: {
            incrementTotal1: function (e) {
                this.total += 1;
                console.log(e);
            },
            incrementTotal2: function () {
                this.total += 1;
            }
        }
    })
</script>
</html>

对上面的例子进行进一步的解析：
1、首先看自定组件button-counter ，给其绑定了方法：increment；
2、点击button时会执行函数 increment，increment中有 this.$emit(‘increment1’,”这个位子是可以加参数的”);
3、当increment执行时，就会触发自定函数increment1，也就是incrementTotal1函数；
4、而increment执行时没有触发自定义函数increment2，所以点击第二个按钮不执行incrementTotal2的函数。

有一个王小森

关注

14
点赞
踩
29

收藏

觉得还不错? 一键收藏
7
评论
vue.js中this.$emit的理解

对于vue.js中的this.emit的理解：this.emit的理解： this.emit(‘increment1’,”这个位子是可以加参数的”)；其实它的作用就是触发自定义函数。
复制链接

扫一扫