vue2.0——管理组件通信

来源：互联网发布：阿里云免费邮箱个人版编辑：程序博客网时间：2024/06/05 07:12
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/Vue.js"></script>    <script>        //准备一个空的实例对象        var Event = new Vue();        var A = {            template:`                <div>                    <span>这是A组件</span> -》{{a}}                    <input type="button" value="把A数据传给C" @click="send">                </div>            `,            methods:{                send(){                    Event.$emit('a-msg',this.a);                }            },            data(){                return {                    a:'这是a数据'                }            }        };        var B = {            template:`                <div>                    <span>这是B组件</span> -》{{a}}                    <input type="button" value="把B数据传给C" @click="send">                </div>            `,            methods:{                send(){                    Event.$emit('b-msg',this.a);                }            },            data(){                return {                    a:'这是b数据'                }            }        };        var C = {            template:`                <div>                    <h3>这是C组件</h3>                    <span>接受过来的A数据为：{{a}}</span>                    <br>                    <span>接受过来的B数据为：{{b}}</span>                </div>            `,            data(){                return {                    a:'',                    b:''                }            },            mounted(){                Event.$on('a-msg',function(a){                    this.a=a;                }.bind(this));                Event.$on('b-msg',function(a){                    this.b=a;                }.bind(this));            }        };        window.onload = function(){            var vm = new Vue({                el:'#box',                components:{                    'com-a':A,                    'com-b':B,                    'com-c':C                }            });        }    </script></head><body>    <div id="box">        <com-a></com-a>        <com-b></com-b>        <com-c></com-c>    </div></body></html>
0 0