父组件给子组件传值
2019-10-17 本文已影响0人
张三爱的歌
<template>
<div>我是首页组件
<br >
<Header :title="title" :msg="msg" :run="run" :home='this'></Header>
</div>
</template>
<script>
import Header from './Header'
export default {
name:'Homea',
data(){
return {
msg:'我是一个首页消息',
title:"首页"
}
},
components:{
Header
},
methods: {
run(data){
alert('我是父组件的run方法'+data)
}
},
}
</script>
<style scoped>
</style>
子组件
<template>
<div>我是头部组件--{{title}}---{{msg}}
<br>
<button @click="run('123')">调用父组件方法</button>
<br>
<button @click="getThis()">获取父组件里面的数据</button>
</div>
</template>
<script>
export default {
name:'Homea',
data(){
return {
}
},
props:['title','msg','run','home'],
methods: {
getThis(){
alert(this.home.msg)
}
},
}
</script>
<style scoped>
</style>