vue 组件通信（子组件传值作用于父组件）

之前的学习之中一直没有涉及到组件通信的问题，今天做了一个登录然后要结合跳转其他页面，但是结合vue单页面应用开发的设计，子组件在父组件上的显示与否是需要一个开关的，我将这个开关安装在父组件上，由子组件自己控制是否显示自己。而这就设计到组件之间的通信问题。本篇重点就落在通信问题上。

父组件：

<template>
	<div class="titlehead">
		<el-row>
		  <el-col :span="8">
		  	<div class="grid-content bg-purple">
			  	<span class="orange">亲，请登录</span>
			  	<a class="gray">免费注册</a>
			  	<a class="gray">登录</a>
			  </div>
		  </el-col>
		  <el-col :span="8">
		  	<div class="grid-content bg-purple-light">
		  		
		  	</div>
		  </el-col>
		  <el-col :span="8">
		  	<div class="grid-content bg-purple">
		  	    <router-link v-bind:to="'/head'">商品</router-link>
		  	    <router-link v-bind:to="'/head'">购物车</router-link>
		  	    <router-link v-bind:to="'/head'">联系客服</router-link>
		    </div>
		  </el-col>
		</el-row>
		<div class="" v-if="a">
			<v-login v-bind:content="msg" v-on:ParentRecEv="showMsg"></v-login>
		</div>
		<div class="" v-else="!a">
			<v-table></v-table>
		</div>
		
	</div>
</template>

<script>
	import login from '../login/login.vue';      // 子组件
	import Usertable from '../table/Usertable.vue';// 子组件

	export default {
  name: 'titlehead',
  data () {
    return {
    	  a:true,   //父组件的开关，控制是否显示
    	  'msg' : '父组件'         
    }
  },
 methods : {
  showMsg( msg ){   //父组件接收来自子组件发来的消息，控制是否实现子组件的显示与否
  this.a = msg;
  }
 },
  components:{
  	'v-login':login,
  	'v-table':Usertable
  
  }
}
</script>

<style>
	.orange{
		color:orange;
	}
	.gray{
		color: gray;
	}
</style>

子组件login

<template>
	<div class="login">
		<div class="login_content">
			<form action="" id="loginForm">
				<div class="form_title">
					<span :style="item" @click="select(1)">快速登录</span>
					<span :style="item1" @click="select(2)">帐号密码登录</span>
				</div>
					<span class="error_tip">{{errorinfo}}</span>
				<div class="form_item">
					<input type="text" :style="test"  v-model="user" placeholder="请输入帐号" @blur="validataPhone(user)"/>
				</div>
				<div class="form_item">
					<input type="password" :style="testp" v-model="pass" placeholder="请输入密码" @blur="validataPass(pass)" />
				</div>				<div class="form_item">
					<input type="checkbox" class="checkbox"/><span>记住密码</span>
				</div>
				<div class="form_submit">
				   <input type="button" value="提交" class="submit" @click="onClick(user,pass)"/>
				</div>
			</form>
			<div class="forget">
				<span>忘记密码？</span>|
				<span>注册帐号</span>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
  name: 'login',
  props : ['content'],
  data () {
    return {
    	user:'',
    	pass:'',
    	errorinfo:'',
    	item:'', // 快速登录
    	item1:'',//帐户登录
    	test:'',   //正则验证手机号
    	testp:'',  //验证密码
    	correct:{
    		border:"1px solid green",
    	},
    	error1:{
    		border:"1px solid red",
    	},
    	currentItem:{
    		color:"black",
    	}
      }
   },
   created:function(){
   	       this.item1 = this.currentItem;  //最初默认为帐户登录界面
		},
   methods: {
   	  //子组件通信发送信息的关键位置
   	send(){
        this.$emit( 'ParentRecEv', false)
      },
   	  //验证手机号
       validataPhone(value){
       	   this.errorinfo = '';
       	   if(value === '')//为空验证
       	   {
       	   	 this.errorinfo = '请输入手机号！';
       	   	 this.test = this.error1;
       	   	 return false;  
       	   }
       	    var CheckPhone=/^[1][3,4,5,7,8][0-9]{9}$/;  //正则验证
		    if (!CheckPhone.test(value)) { 
		    	  this.errorinfo = '请输入正确的手机号！';
		    	  this.test = this.error1;
	              return false;  
	          } else {  
	          	  this.errorinfo = '';
	          	  this.test = this.correct;
	              return true;  
	          }  
	      },
	   validataPass(value){
	   	  this.errorinfo = '';
	   	  if(value === '')//为空验证
       	   {
       	   	 this.errorinfo = '请输入密码！';
       	   	 this.testp = this.error1;
       	   	 return false;  
       	   }
       	   this.testp = this.correct;
       	   this.errorinfo = '';
       	   return true;
	   },
	    select(data){
	    	switch(data){
	    		case 1: 
	    		   this.item = this.currentItem;
	    		   this.item1 = '';
	    		   break;
	    		
	    		case 2:
	    		   this.item1 = this.currentItem;
	    		   this.item = '';
	    		   break;
	    		default:break;
	    	}
	    },
	   onClick(value1,value2){
	   	    if(value1===''&& value2===''){
	   	    	this.errorinfo = '请输入用户名和密码';
	   	    	return false;
	   	    }
	   	    
	   	    var username = this.user;
	   	    var password = this.pass;	
	   	   this.$ajax({
                    method: 'post',
                    url : "http://ip地址:8088/demo/user/login.do",
                    data : {
                        "username": username,
                        "password": password
                    }
                })//请求成功后执行then          如果直接在里面访问 this，无法访问到 Vue 实例，this指向发生了变化。建议使用箭头函数,下面有讲
			   .then((response)=> {
			        console.log(response);   //处理后台返回的数据
			        var result = response ;
			        var id=result.data.data.id;
			        this.send();
			     })//请求失败后执行catch
			    .catch(function(err){
			        console.log(err)
			     }) ;
				     	
	     	return true;
	    }
     }
}
</script>

归纳一下核心内容：

父组件：

        1、先调用子组件，并设置开关为true

               <div class="" v-if="a">
<v-login v-bind:content="msg" v-on:ParentRecEv="showMsg"></v-login>

</div>

                1）a为父组件上的开关控制器默认设为true

                2）content为子组件绑定的属性props : ['content']

                3）msg为父组件接收的信息，为后面改变a做铺垫

                4）ParentRecEv为绑定的父组件名字，可自定义名字，但要保持父子组价一致

                5）showMsg是父组件获取子组件的信息的函数

        2、创键接收信息的方法

              methods : {
                  showMsg( msg ){
                  this.a = msg;  //子组件传来的消息改变父组件
                  }

                 },

         3、配置子组件

             components:{
          'v-login':login
  

              }

子组件：

       1、在data中配置 props : ['content'],属性

       2、在methods方法中添加发送信息的方法

           //子组件通信
     send(){
               this.$emit( 'ParentRecEv', false)

           },

           1）ParentRecEv  接收的信息的父组件

           2）false 为要传输的值

          即：$emit( '作用到的组件', “发送的值”)

总结：本例仅为参考，结合的是webpack以及vue-cli。