webpack+vue 组件间传参(单一事件中心管理组件通信--$root)，如果有路由的话会失效

先给一个例子：

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

利用全局初始化Vue对象作为载体：

  window.onload=function(){
            new Vue({
                el:'#box',
                components:{
                    'com-a':A,
                    'com-b':B,
                    'com-c':C
                }
            });
        };

 //准备一个空的实例对象
        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);
                }
            },
              mounted(){
            	console.log(456)
            },
            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);
                }
            },
            mounted(){
            	console.log(123)
            },
            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));
            }
        };
  • 　　此时可以传递一些信息，在不同.vue文件内传递方式：
var vm = new Vue({
    router,
    render: h => h(App),
    data(){
        return {
            msg:"快下班了",
            myEvent: new Vue(),
            my:9527
        }
    }

初始化定义一个event的vue对象，然后“发射”数据：

 translate(){
    this.$root.myEvent.$emit('ruby', this.muy);
 }

绑定数据：

mounted(){
    this.$root.myEvent.$on('ruby', (a)=>{
         this.pp=a;
    });        
 }

这样可以实现组件间的信息的传递，但是如果有路由的存在的话就不行了，可以使用路由传参的形式来实现：

主要有以下几个步骤：

（1） 设置好路由配置

//配置路由
const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[
{path:':username/age/:age', component:UserDetail}
]
},
{path:'*', redirect:'/home'} //404
];

（2）在router-link中传递参数（动态路径参数）:
<li><router-link to="/user/strive/age/10">Strive</router-link></li>

（3）在router的目标组件上获取入参:

var UserDetail={
            template:'<div>{{$route.params}}</div>'
        };

 

posted @ 2017-04-17 14:24  漆黑小T  阅读(5938)  评论(0)  编辑  收藏  举报