vue.js中this.$emit的理解

来源：互联网发布：python 垃圾回收阈值编辑：程序博客网时间：2024/05/21 01:54

对于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的函数。

阅读全文

2 0