使用Vue开发网站之路2-多组件通信1（利用bus总线进行事件触发）

我的数据一般都放到对应的单组件里，因为我开发的是web app，组件较多，如果请求的数据都放到new Vue里面的话，难免太乱。用多组件比较方便，当然，如果这个页面只有一个请求的化，可以直接把请求放到新建的Vue对象里面。

像这样：

new Vue({el:'main',//html只能读取new Vue里面的datadata:{result:''},//mounted表示result属性已经生成mounted:function(){this.result = request(); //result之前一定要添加this，指该Vue对象}//还可以放非自定义组件的方法})

result的赋值在created阶段就可以完成，vue实例已经被创建了，只不过到mounted的时候才可见，我一开始放到mounted是看到网上的做法，后来实践所得，在created已近后面都可以。

继续回到多组件通信

1 非父子之间的多组件的事件传递

这里我用的是bus总线，因为这是简单的事件传递，没有涉及从一个数据源存储

$(function() {var bus = new Vue();//中央事件总线//验证Vue.component("identifying-code",{props:["value"],template: '<div class="input_message">\                <span id="check_triget" class="check">{{RandomData}}</span><input ref="input" id="answer" v-on:input="check($event.target.value)"></input>\            </div>',        data:function() {        return {        A: Math.round(Math.random()*9),        B: Math.round(Math.random()*9)        }        },        created:function() {        //记录当前的vueComponent对象，因为freshData事件的回调的this为vue        var that = this;        //自定义事件        bus.$on("freshData",function() {        //重新生成验证码        //清空验证码输入框        that.A = Math.round(Math.random()*9);        that.B = Math.round(Math.random()*9);        that.$refs.input.value = "";        })        },        methods:{        check:function(value) {if(value == this.calculate) {this.$emit("input",true);}        }        },        computed: {        RandomData:function() {return this.A + " + " + this.B;        },        calculate: function() {        return this.A + this.B;        }        }});new Vue({el:'header',components:{'change-lan':changelan}});/**当前页面的vue对象data包括inputUserName用户名inputPassword密码hasIndentify是否已通过验证码canSeeIndentify是否能看到验证码**/new Vue({el:"main",data:{inputUserName:"",inputPassword:"",hasIndentify:false,canSeeIndentify:true},methods:{//提交按钮的逻辑submit:function(){if(this.checkData()){//这是请求ajax，如果密码两次不成功就设置canSeeIndentify为true，hasIndentify为false显示验证码//如果没有登录成功，就要更换验证码bus.$emit("freshData");}},//提交数据时，对数据验证checkData:function() {//如果inputUserName不为空，inputPassword也不为空，而且已通过验证码if(this.inputUserName.trim() !="" && this.inputPassword.trim() !="" && this.hasIndentify){return true;}else {return false;}},//注册按钮逻辑register:function() {location.href = "../html/register.html";}}});})

这里的话主要业务场景是登陆没成功，刷新校验码，这个检验码的生成过程不用管，因为是要跟服务端配合的，然后我并没有服务端，就自己做了一个随机的加法公式。这里主要是用到

bus.$emit("freshData");

跟

bus.$on("freshData",function() {        //重新生成验证码        //清空验证码输入框        that.A = Math.round(Math.random()*9);        that.B = Math.round(Math.random()*9);        that.$refs.input.value = "";        })

给验证框绑定freshData事件，再在其他地方调用bus.$emit("freshData");触发事件。