美文网首页
父组件给子组件传值

父组件给子组件传值

作者: 张三爱的歌 | 来源:发表于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>

相关文章

  • Vue_组件间传值

    1、父组件传值给子组件2、子组件传值给父组件 1、父组件传值给子组件 2、子组件传值给父组件

  • vue2.0 父子组件传值

    父组件传值给子组件 子组件 子组件通过 props 接收值 父组件 父组件通过标签属性传值 子组件传值给父组件 子...

  • react子组件、父组件相互传值

    子组件传图片路径imgUrl值给父组件,父组件传imgaddr值给子组件子组件: 父组件:

  • 【Vue3 从入门到实战 进阶式掌握完整知识体系】011-探索组

    2、组件间传值及传值校验 父组件给子组件传值 运行结果 父组件给子组件传动态参数 运行结果 子组件校验父组件的传参...

  • 2018-09-05

    组件传值问题 父组件给子组件传值应该使用props。子组件要给父组件传值,需要调用父组件传递的方法。props传值...

  • React 父子组件通信

    父子组件通信分为【父组件给子组件传值】、【父组件获取子组件的值】两类。 一.父组件给子组件传值3种方式 1.父组件...

  • vue2.0小结

    父组件与子组件之间的通信 父组件传值给子组件,通过props 子组件传值给父组件,通过$emit 如果在父组件想在...

  • 第10节 React propTypes defaultPr

    一、父组件给子组件传值 1.1 defaultProps 父子组件传值中,如果父组件调用子组件的时候不给子组件传值...

  • 第十讲、Vue3.x父组件给子组件传值、Props、Props验

    一、父子组件介绍 二、父组件给子组件传值 1、父组件调用子组件的时候传值 2、子组件接收父组件传值 三、Props...

  • Vue父组件与子组件的交互

    一、父组件传值给子组件 1.1 父组件代码 1.2子组件代码 二、子组件传值到父组件 2.1 子组件代码 2.2 ...

网友评论

      本文标题:父组件给子组件传值

      本文链接:https://www.haomeiwen.com/subject/snlmmctx.html