Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输

最新推荐文章于 2022-07-22 16:37:40 发布

xiaokanfuchen86

最新推荐文章于 2022-07-22 16:37:40 发布

阅读量292

点赞数

分类专栏： # vue

原文链接：https://www.cnblogs.com/mafeng/p/7804080.html

版权

vue 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

<!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>

xiaokanfuchen86

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输

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

扫一扫