Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输_vuejs 如何获取$emit的数据-优快云博客

本文链接：https://blog.youkuaiyun.com/js_admin/article/details/77443647

本文介绍了一个使用 Vue2 实现的单一事件管理机制来促进组件间通信的例子。通过创建一个全局的 Vue 实例作为事件中心，组件 A 和 B 能够将各自的数据发送到组件 C 中。这种方式有效地解决了组件间通信的问题，尤其是在非父子组件关系的情况下。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Vue2-单一事件管理组件通信</title>
    <script src="vue.js"></script>
    <script type="text/javascript">

    //准备一个空的实例对象
    var Event = new Vue();

    //组件A
    var A = {
        template: `
            <div>
                <span>我是A组件的数据->{{a}}</span>
                <input type="button" value="把A数据传给C" @click = "send">
            </div>
        `,
        methods: {
            send () {
                Event.$emit("a-msg", this.a);
            }
        },
        data () {
            return {
                a: "我是a组件中数据"
            }
        }
    };
    //组件B
    var B = {
        template: `
            <div>
                <span>我是B组件的数据->{{a}}</span>
                <input type="button" value="把B数据传给C" @click = "send">
            </div>
        `,
        methods: {
            send () {
                Event.$emit("b-msg", this.a);
            }
        },
        data () {
            return {
                a: "我是b组件中数据"
            }
        }
    };
    //组件C
    var C = {
        template: `
            <div>
                <h3>我是C组件</h3>
                <span>接收过来A的数据为: {{a}}</span>
                <br>
                <span>接收过来B的数据为: {{b}}</span>
            </div>
        `,
        mounted () {
           //接收A组件的数据
           Event.$on("a-msg", function (a) {
                this.a = a;
           }.bind(this));

           //接收B组件的数据
           Event.$on("b-msg", function (a) {
                this.b = a;
           }.bind(this));
        },
        data () {
            return {
                a: "",
                b: ""
            }
        }
    };
    window.onload = function () {
        new Vue({
            el: "#box",
            components: {
                "dom-a": A,
                "dom-b": B,
                "dom-c": C
            }
        });
    };


    </script>
</head>
<body>
    <div id="box">
        <dom-a></dom-a>      
        <dom-b></dom-b>      
        <dom-c></dom-c>      
    </div>

</body>
</html>