vue非父子关系之间通信传值

第一种方法:

　　通过给vue实例添加自定义属性

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>非父子组件传值(bus)</title>
        <script src="js/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <child :msg="first"></child>
            <child1 :msg="last"></child1>
        </div>

        <script>
            
            /*
             * Vue.prototype.busb为自定义的属性 可以是a,b也可以c,d等等
             * */
            Vue.prototype.bus=new Vue();
            
            var child={
                template:"<div @click='brother'>{{message}}</div>",
                data(){
                    return{
                        message:this.msg
                    }
                },
                props:{
                    msg:String
                },
                methods:{
                    brother(){
                        this.bus.$emit("change",this.message)
                    }
                },
                mounted(){
                    var _this=this;
                    this.bus.$on("change1",function(info){
                        alert(_this.message+info)
                    })
                }
            }
            var child1={
                template:"<div @click='brother1'>{{message}}</div>",
                data(){
                    return{
                        message:this.msg
                    }
                },
                props:{
                    msg:String
                },
                methods:{
                    brother1(){
                        this.bus.$emit("change1",this.message)
                    }
                },
                mounted(){
                    var _this=this;
                    this.bus.$on("change",function(info){
                        alert(_this.message+info)
                    })
                }
            }
            
            var app=new Vue({
                el:"#app",
                data:{
                    first:"张三",
                    last:"李四"
                },
                components:{
                    child:child,
                    child1:child1
                },
                
            })
            
        </script>

    </body>

</html>

第二种方法:eventHub

在公共组件创建vue实例,一般都在app.Vue的data里定义eventHub:new Vue(),然后通过provide抛出,其他组件通过inject注入eventHub,然后分别通过evenHub.emit与eventHub.$on触发与监听

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>非父子组件传值2(eventHub)</title>
        <script src="js/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <button @click="getRandom">Send a message to the child component</button>
            <one></one>
        </div>

        <script>
            
            var two={
                template:"<div>{{twoInfo}}</div>",
                data(){
                    return {
                        twoInfo:""
                    }
                },
                inject:['eventHub'],
                created(){
                    var _this=this;
                    this.eventHub.$on("send",function(msg){
                        _this.twoInfo=msg;
                    })
                }
            }
            var one={
                template:"<div>{{oneInfo}}<two></two></div>",
                inject:['eventHub'],
                data(){
                    return{
                        oneInfo:""
                    }
                },
                created(){
                    var _this=this;
                    this.eventHub.$on("send",function(msg){
                        _this.oneInfo=msg;
                    })
                },
                components:{
                    two:two
                }
                
            };
            var app=new Vue({
                el:"#app",
                data:{
                    eventHub:new Vue()
                },
                provide(){
                    return {
                        eventHub:this.eventHub
                    }
                },
                components:{
                    one:one
                },
                methods:{
                    getRandom(){
                        this.eventHub.$emit("send", Math.random())
                    }
                }
                
            })
            
        </script>

    </body>

</html>

以上代码为本地,不需要node启服务之类的,运行需要下载vue.js文件,修改你的src路径即可!

vue非父子关系之间通信传值

猜你喜欢