vue 2.0 单一事件中心管理组件通信

最新推荐文章于 2024-01-01 00:42:43 发布

scorpio_h

最新推荐文章于 2024-01-01 00:42:43 发布

阅读量445

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/scorpio_h/article/details/59768041

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1、声明

var Event=new Vue();

2、传递数据
Event.$emit(事件名称, 数据)

3、接收数据，注意this指向
Event.$on(事件名称,function(data){
//data

}.bind(this));

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <div id="box">
        <com-a></com-a>
        <com-b></com-b>
        <com-c></com-c>
    </div>

    <script src="//cdn.bootcss.com/vue/2.2.1/vue.common.js"></script>
    <script> 
        // 准备一个空的实例对象
        var Event=new Vue();

        // 组件A
        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数据"
                }
            }
        };

        // 组件B
        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数据"
                }
            }
        };

        // 组件C
        var C={
            template:`
                <div>
                    <h3>我是C组件</h3>
                    <span>接受过来的A数据为：{{a}}</span>
                    <br>
                    <span>接受过来的B数据为：{{b}}</span>
                </div>   
            `,
            data(){
                return{
                    a:'',
                    b:''
                }
            },
            mounted(){
                // 接受A组件的数据
                Event.$on('a-msg',function(a){
                    this.a=a;
                }.bind(this));
                // 接受B组件的数据
                Event.$on('b-msg',function(b){
                    this.b=b;
                }.bind(this))
            }
        };

        window.οnlοad=function(){
            new Vue({
                el:"#box",
                components:{
                    'com-a':A,
                    'com-b':B,
                    'com-c':C
                }
            })
        }
    </script>
</body>
</html>