使用Vue开发网站之路2-多组件通信3（父子间通信，组件与vue通信）

父子间通信

其实就是通过在子组件中添加一个属性用来接收父组件的值就可以了，这个没啥好说的。要注意的是子组件的tamplate里面调用属性只能{{}}，不能在标签里面定义，这个让我在后面做父子表单（就是先有基础表单，然后其他表单根据slot内容分发实现）的时候绊了一跤。还好还是有办法的。

组件与vue通信这个说得有点奇怪，其实就是因为你的组件很多，有时候你的vue一个动作可能需要知道其他组件的状态，就像你提交表格，你需要知道其他组件的值是否填写正确。于是还是要通信。咋通呢。来来来。其实很简单。

就是vue里有对应的组件的值，提交的时候验证这些值就可以了，如果该被验证的组件式输入框的话，那么你就要实时根据输入的值来更新vue里对应的属性值。

只要实现是同步input的Value跟Vue的值

同步方案：

这个是vue使用说明，然而我发现就算没有value属性也还是可以的。但不能没有input事件跟this.$emit("input",target.value);

例子：

<user-name v-model="inputUserName"></user-name>

   //用户名
	Vue.component("user-name",{
		template:'<div class="input_message">userName:\
                <input ref="input" v-on:input="updateValue($event.target)" class="right_box" v-bind:placeholder="placeholder"></input>\
            	</div>',
        data:function() {
            return {
                placeholder:ls.email + "/" + ls.tel
            }
        },
        props:["value"],
        methods:{
        	updateValue:function(target) {
        		this.$emit("input",target.value);
        		var target = $(target);
        		target.removeClass("is_empty");
        	}
        }
	});

	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";
			}
		}
	});

})