子组件
<template>
<div id="header">
<input type="text" v-model="username" @change="setUser">
</div>
</template>
<script type="text/ecmascript-6">
export default{
props: {
},
data()
{
return {
username:''
}
},
created() {
},
methods: {
setUser:function () {
this.$emit('transferUser',this.username);
}
},
components: {},
computed: {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
父组件
<template>
<div id="app">
<v-header @transferUser="getUser"></v-header>
<div>用户名{{user}}</div>
</div>
</template>
<script type="text/ecmascript-6">
import header from 'components/header/header.vue';
export default{
props: {},
data()
{
return {
user:''
}
},
created() {
},
methods: {
getUser(msg){
this.user=msg;
}
},
components: {
'v-header':header,
},
computed: {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
