Vue中同级组件的数据传递

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="app">
         <dom-a></dom-a>
         <dom-b></dom-b>
         <dom-c></dom-c>
    </div>
    <script src="vue.js"></script>
    <script type="text/javascript">

    var Event = new Vue();

    var A = {
        data() {
            return {
                a: '我是a组件中的数据'
            }
        },
        template: `
                <div>
                    <span>我是A组件的数据->{{a}}</span>
                    <input type="button"  value = '把A数据传给C' @click = 'send'/>
                </div>
            `,
        methods: {
            send() {
                // $emit('事件名字',数据)

                // this.$emit()
                console.log(this);
                Event.$emit('a-msg',this.a);

            }
        }
    };
    var B = {
        data() {
            return {
                b: '我是b组件中的数据'
            }
        },
        template: `
                <div>
                    <span>我是A组件的数据->{{b}}</span>
                    <input type="button"  value = '把B数据传给C' @click = 'send'/>
                </div>
            `,
        methods: {
            send() {
                // $emit('事件名字',数据)
                // this.$emit()
                console.log(this);
                  Event.$emit('b-msg',this.b);
            }
        }
    };

    var C = {
        data(){
            return {
                a:'',
                b:''
            }
        },
        template:`

    <div>
        <h3>我是C组件</h3>
        <span>接收A组件的数据为：{{a}}</span>
        <br />
        <span>接收B组件的数据为：{{b}}</span>
    </div>
        `,
        mounted(){
            // 接收A中的数据

            // $on('事件名',fn(a))
            Event.$on('a-msg',(a)=>{
                this.a = a;
            });
            // 接收A中的数据
            Event.$on('b-msg',(b)=>{
                this.b = b;
            });
        },
    }
    new Vue({
        el: '#app',
        components: {
            'dom-a': A,
            'dom-b': B,
            'dom-c': C
        }
    })
    </script>
</body>

</html>

相关阅读:
springcloud2.0 添加配置中心遇到的坑
redis 字符串和集合操作
Linux
流畅的python 符合python风格的对象
流畅的python 对象引用可变性和垃圾回收
流畅的python 闭包
流畅的python 使用一等函数实现设计模式
互联网协议入门
流畅的python 字典和集合
流畅的python python数据模型

原文地址：https://www.cnblogs.com/SharkJiao/p/13857310.html