Vue---父子组件传值

预备知识:用vue-cli搭建好环境,会创建注册组件

1,父子组件向子组件传值

• 创建子组件

   <!-- son.vue-->
   <template>
       <div>
         <h1>会员中心的子组件</h1>
         <h1>{{msgFromFather}}</h1><!-- 这里可以将从父组件传来的值拿来用-->
       </div>
   </template>
   
   <script>
       export default {
           name: "memberSon",
         data(){
             return(){
            	 },
             },
             props:['msgFromFather']//props子组件用来接收父组件传过来的值
       }
   </script>
  

• 创建父组件

    	<!-- father.vue-->
    	<template>
        <div>
          <h1>会员</h1>
          <member-son :msgFromFather="msgForSon "></member-son>
       
        </div>
    </template>
    
    <script>
      import memberSon from '../subComponents/memberSon.vue'
        export default {
            name: "member",
          data(){
              return{
                msgForSon:"从父组件传过去的值"
              }
          },
          components:{
              memberSon
          }
        }
    </script>
  

父组件向子组件传值

• 子组件代码

    	<!-- son.vue-->
    	<template>
        <div>
          <h1>会员中心的子组件</h1>
          <h1> {{msgFromFather}}</h1>	<!-- 父组件传过来的值可以直接使用(props接收的)-->
          <a @click="sendMsg" href="javascript:;">向父组件传值</a>
        </div>
    </template>
    
    <script>
        export default {
            name: "memberSon",
          data(){
              return{
                msg:'我从子组件来'
              }
          },
          props:["msgFromFather"],
          methods:{
              sendMsg(){
                //在子组件中调用this.$emit,第一个参数是父组件绑定的监听事件,
                this.$emit('listenToChildEvent',this.msg);
              }
          }
        }
    </script>
  

• 父组件代码

    <!-- father.vue-->
    	<template>
        <div>
          <h1>会员</h1>
          <member-son :msgFromFather="msgForSon "  @listenToChildEvent='getMsgFromSon'></member-son>
          <h1>{{msg}}</h1>
        </div>
    </template>
    
    <script>
      import memberSon from '../subComponents/memberSon.vue'
        export default {
            name: "member",
          data(){
              return{
              msg:'这里会传来子组件的值',
                msgForSon:"从父组件传过去的值"
              }
          },
          components:{
              memberSon
          },
          methods:{
    				getMsgFromSon(data){
    					console.log(data);
    					this.msg = data;
    				}
    			}
    		 }
    </script>