我的数据一般都放到对应的单组件里，因为我开发的是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");触发事件。