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

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

像这样：

new Vue({
el:'main',
//html只能读取new Vue里面的data
data:{
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");触发事件。