vue父子组件传值

1、子组件向父组件传值

图示解释

代码示例
子组件

<template>
  <section class="child">
    <div >
      <label class="user">
        <span>用户名：</span>
        **<input v-model="username" @change="setUser"/>**
      </label>
    </div>
  </section>
</template>
<script>
  export default {
    name:'login',
    data(){
      return{
        username: ' '
      }
    },
    methods:{
      setUser: function () {
        this.$emit('transferUser',this.username)
      }
    }
  }
</script>

父组件

<template>
  <div id="app">
    <Child @transferUser="getUser"></Child>
    <p>用户名为：{{user}}</p>
  </div>
</template>
<script>
  import Child from './components/Child'
  export default {
    name:'app',
    data(){
      return{
        user:''
      }
    },
    methods:{
      getUser(msg){
        this.user=msg
      }
    },
    components:{
      Child
    }
  }