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
}
}