父-->子（父向子传递数据通过props）
父组件代码
<template>
<Header :url="baseUrl"></Header>
</template>
<script>
import Header from './header';
export default {
name: 'index',
components: {
Header
},
data () {
return {
baseUrl: 'www.xhy.com'
}
}
}
</script>
子组件代码
<template>
<header>
{{url}}
</header>
</template>
<script>
export default {
name: 'header1',
props:['url']
}
</script>
子-->父（通过$emit）
this.$emit('自定义事件名','要传递的数据')
子组件代码
<template>
<div>
用户名：
<input type="text" v-model="userName" @change="setUser">
</div>
</template>
<script>
export default {
name: 'login',
data(){
return{
userName:''
}
},
methods:{
setUser (){
this.$emit('transferUser',this.userName);
}
}
}
</script>
父组件代码
<template>
<Login @transferUser="getUser"></Login>
</template>
<script>
import Login from './login';
export default {
name: 'app',
components: {
Login
},
data () {
return {
user: ''
}
},
methods:{
getUser(msg){
this.user = msg;
}
}
}
</script>
原文作者：匆匆那年_海，博客主页：https://www.jianshu.com/u/910c0667c515
95后前端汉子，爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。
