vue2.0中 $emit() 和 $on() 的用法

最新推荐文章于 2025-06-03 11:52:14 发布

Leon_94

最新推荐文章于 2025-06-03 11:52:14 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue emit on

本文链接：https://blog.csdn.net/sinat_36422236/article/details/79226381

vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了Vue2.0中组件通信的重要方法$emit()和$on()。通过实例代码展示了如何使用$emit()存储数据，并通过$on()取出并处理数据，强调了存取名称的一致性原则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单粗暴直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Leon</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
    <body>
        <div id="box">
            <com-a></com-a>
            <com-b></com-b>
            <com-c></com-c>
        </div>
        <script type="text/javascript">
            //准备一个空的实例对象
            var Event = new Vue();
            var A={
                template:`
                    <div style="border: 1px solid red; margin-bottom: 10px； width: 300px;">
                        <h4>A组件</h4>
                        <p>{{a}}</p>
                        <input type="button" value="把A数据给C" @click="send" />
                    </div>
                `,
                data(){
                    return {
                        a:'我是A里面的数据'
                    }
                },
                methods:{
                    send(){        //A发送数据
                        Event.$emit('a-msg',this.a);
                    }
                }
            };
            var B={
                template:`
                    <div style="border: 1px solid green; margin-bottom: 10px； width: 300px;">
                        <h4>B组件</h4>
                        <p>{{b}}</p>
                        <input type="button" value="把B数据给C" @click="send" />
                    </div>
                `,
                data(){
                    return {
                        b:'我是B里面的数据'
                    }
                },
                methods:{
                    send(){
                        Event.$emit('b-msg',this.b);
                    }
                }
            };
            var C={
                template:`
                    <div style="border: 1px dotted green; margin-bottom: 10px；width: 300px;">
                        <h4>我是C组件,我在坐等接收数据</h4>
                        <p>{{a}}</p>
                        <p>{{b}}</p>
                    </div>
                `,
                data(){
                    return{
                        a:'',
                        b:''
                    }
                },
                mounted(){        //两种接收的方式
                    var _this = this;
                    Event.$on('a-msg',function(a){
                        _this.a=a;
                    });
                    Event.$on('b-msg',function(b){
                        this.b = b;
                    }.bind(this))
                }
            };
            new Vue({
                el:'#box',
                data:{

                },
                components:{
                    'com-a':A,
                    'com-b':B,
                    'com-c':C
                }
            })
        </script>
    </body>
</html>