父组件给子组件传值

<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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容