vue-父子组件之间的参数传递

父组件向子组件传递：
父组件中：

       <template>
    	  <div id="app">
            <child :logo11="logoMag"></child>
          </div>
       </template>

       <script>
       //引用子组件
       import child from "@/components/TestChild.vue";
       export default {
         data() {
           return {
             logoMag: '111111111111'
           };
         },
         components:{
           child
         }

       };
       </script>

子组件中：

       <template>
    	<header class="header">
           <div id="logo">{{logo11}}</div>
        </header>
       </template>

       <script>
       export default {
         data() {
           return {
           };
         },
         //与父组件中的:属性名一致
         props: ['logo11']

       };
       </script>

子组件向父组件传递：
父组件中：

<template>
    <div id="app">
        <childCopy @transferUser="getUser"></childCopy>
        <p>用户名为: {{user}}</p>
    </div>
</template>

<script>
import childCopy from "@/components/TestChild copy.vue";
export default {
  data() {
    return {
      user: ''
    };
  },
  methods:{
    getUser(msg){
      this.user = msg
    }
  },
  components:{
      childCopy
  }

};
</script>

子组件中：

<template>
  <section>
    <div class="login">
      <label>
        <span>用户名：</span>
        <input v-model="username" @change="setUser" />
      </label>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      username:''
    };
  },
  methods:{
    setUser: function(){
   //transferUser相当于中转站，自定义方法名，与父组件中的保持一致
      this.$emit('transferUser',this.username)
    }
  }

};
</script>