vue.js中$emit的理解

Posted 2020-09-08 HHLweb

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js中$emit的理解相关的知识，希望对你有一定的参考价值。

官网介绍比较简单

例子：$emit(\'increment1\',[12,\'kkk\'])，直接看是懵逼的有没有，可以先告诉你，就是触发自定义事件increment1(或者函数名吧)，[]为参数

上案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="counter-event-example">
            <p>{{ total }}</p>
            <button-counter v-on:increment1="incrementTotal"></button-counter>
            <button-counter v-on:increment2="incrementTotal"></button-counter>
        </div>
    </body>
    <script src="vue/vue.min.js"></script>
    <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\',[12,\'kkk\']);//$emit
                }
            }
        });
        new Vue({
            el:\'#counter-event-example\',
            data:{
                total:0
            },
            methods:{
                incrementTotal:function(e){
                    this.total += 1;
                    console.log(e);
                }
            }
        });
    </script>
</html>