父组件给子组件传值

作者: 张三爱的歌 | 来源:发表于2019-10-17 10:30 被阅读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>