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

最新推荐文章于 2022-10-18 17:57:33 发布

哼着自己的小调调

最新推荐文章于 2022-10-18 17:57:33 发布

阅读量449

点赞数 1

分类专栏： Vue 文章标签：数据函数管理通信

本文链接：https://blog.csdn.net/weixin_37610328/article/details/71055803

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

同级组件传递可以使用单一事件管理来完成：
注意：this作用域的问题
var Event=new Vue();
Event. $emit(事件名称, 数据) Event.$ on(事件名称,function(data){
//data
}.bind(this));

    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(){
                //var _this=this;
                //接收A组件的数据
                Event.$on('a-msg',function(a){
                    this.a=a;
                }.bind(this));

                //接收B组件的数据
                Event.$on('b-msg',function(a){
                    this.b=a;
                }.bind(this));
            }
        };


        window.onload=function(){
            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>

哼着自己的小调调

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单一事件中心管理组件通信

同级组件传递可以使用单一事件管理来完成：注意：this作用域的问题 var Event=new Vue(); Event.emit(事件名称,数据)Event.emit(事件名称, 数据) Event.on(事件名称,function(data){ //data }.bind(this)); var
复制链接

扫一扫

专栏目录