vue2.0——管理组件通信

最新推荐文章于 2022-09-22 16:48:41 发布

阁下长得好生俊俏

最新推荐文章于 2022-09-22 16:48:41 发布

阅读量358

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/H1069495874/article/details/64904865

Vue 专栏收录该内容

35 篇文章

订阅专栏

本文通过一个示例展示了如何使用Vue.js实现组件间的通信。具体包括创建A、B两个组件并各自发送数据给C组件，C组件通过事件总线接收这些数据并展示出来。

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

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