Vue2--非父子组件通信笔记

来源：互联网发布：ubuntu破解root密码编辑：程序博客网时间：2024/06/05 06:31

核心要点：

var Event=new Vue();Event.$emit(事件名称, 数据)Event.$on(事件名称,function(data){//data}.bind(this));

示例代码：

参考智能社视频

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>智能社——http://www.zhinengshe.com</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <style>    </style>    <script src="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(){                //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>

0 0