Vue父子组件之间的传值问题

子组件给父组件传值

1. 记一个简单的例子，注册（点击注册打开注册模态框，点击注册模态框的关闭图片关闭注册模态框）
   父组件：

   <template>
   	<div class="header">
   		<ul>
   			<li class="login">登录</li>
           	<li class="regester" @click="ShowRegister">注册</li>
   		</ul>
   
   		<register v-if="showregister" @Closeregister="RegisterToHeader"></register>
   	</div>
   </template>
   <script>
   	import Register from "./register.vue"
   	export default{
   		name: "header",
         	data(){
             return{
               showregister:false,
             }
         	},
         	components:{
           	Register
         	},
         	method:{
   			ShowRegister(){
   	          this.showregister = !this.showregister;
   	        },
   	        RegisterToHeader(data){
   	          this.showregister = false;
   	        }
   		}
   	}
   </script>
   

   子组件：

   <template>
     <div class="register">
   	 <div class="register-container"></div>
   	    <!-- 注册模块 -->
   	    <div class="register-from">
   		    <!-- 关闭注册模态框 -->
   		    <div class="close-register" @click="CloseRegister">
   		          <img src="../../../assets/LoginAndRegister/close.png">
   		    </div>
   	    </div>
   	  </div>
      </div>
   </template>
   <script>
   	export default {
         name: "register",
         data() {
           return {
             closeregiser: true,
           }
         },
         methods:{
           CloseRegister(){
             this.closeregiser = false;
             this.$emit('Closeregister',this.closeregiser);
           },
         }
       }
   </script>
   

   这里，子组件通过this.$emit('Closeregister',this.closeregiser);将closeregister的值传给父组件，父组件则通过中的@Closeregister拿到子组件穿过来的值。
   而方法RegisterToHeader中的data就是传过来值。

父组件给子组件传值

假设我有一个父组件 Home和一个子组件 Hot

父组件：

<template>
	<div class="home">
		<hot :hot="hot"></hot>
	</div>
</template>
<script>
	import Hot from "./hot.vue"
	export default{
		name:"home",
		components:{
			Hot,
		},
		data (){
			return{
				hot:"",
			}
		},
		methods:{
			gitdata(sessionid){
			//到你需要获取数据的地方去获取数据
				this.$get('api/get/home',{'session_id':sessionid}).then((data)=>{
					this.hot = data.sucess.data.hot;
				})
			}
		}
	},
	monuted(){
		this.gethomedata(sessionStorage.session_id);
	}
<script>

子组件：

<template>
	<div>
		<ul>
			<li v-for="item in hot">
				{{item.title}}
			</li>
		</ul>
	</div>
</template>
<script>
	export default {
		name: "hot",
      	props:['hot'],
      	data(){
	        return{
	
	        }
	    },
	    methods:{

	    }
	}
</script>

这里，父组件通过调用this.$get('api/get/home',{'session_id':sessionid}).then((data)=>{ this.hot = data.sucess.data.hot; })接口请求后台数据并返回，用data来接受返回的数据，并用hot来存储我们需要用到的其中的数据，然后通过调用子组件的时候将值传给子组件，其中，引号内的值就是要传给子组件的值。
而子组件则通过props:['hot']来接收父组件传过来的值，

，然后调用。

需要注意的是：

1. 父组件中调用子组件时引号内的值必须要与你想要传的值一致，即中"hot"与return{ hot:"", }中的这个hot一致。
2. 父组件中传递值的名字要与子组件中接收值的名字一致，即父组件中的":hot"与子组件props:['hot'],中的hot一致。