Vue 父子组件间通信

父子组件通信

首先说一下父子组件。

比如一个页面有三部分组成,如下所示,

image

在 Vue 开发中对应有一个 APP 组件,如图所示它由三个不同的组件构成,Header、Container、Footer,对应的代码代码如下

app.vue

<template>
  <div>
    <Header/>
    <Container/>
    <Footer/>
  </div>
<template>

如上所示,这个文件对应的组件是 App 组件,它其中包含三个不同的组件。下面分别说明一下父组件调用子组件以及子组件调用父组件的方式。

父组件调用子组件

如果 App 组件想调用 Header 组件的一个方法,可以使用 $refs 特性,在子组件声明的地方,指定好一个属性变量,用于指向子组件,然后 App 组件在内部就可以直接通过这个引用来访问子组件的方法了,如下所示:

<template>
    <div>
     <!-- 定义 ref -->
    <Header ref="header"/>
    <Container/>
    <Footer/>
  </div>
<template>
export default{
    data(){
    },
    mounted(){
    //通过 refs.header 找到组件,并调用已经在 Header 中写好的 test 方法
    // 前提:必须在 Header 中存在这个方法 
      this.$refs.header.test()
    },
    methods(){
    }
}     

需要注意的点:

这里子组件是一个单一的实例,如果支持循环渲染的组件,那么这里通过 this.$refs.header 拿到的实例会是一个数组,而并非具体对象,所以此种情况下应该遍历去调用方法,如下所示的组件就是这种情况:

<templete>
        <Todo
            v-for="group in groupTodos"
            :key="group.objectId"
            ref="childTodo"
        />
</templete>

如上指定了 childTodo 为引用值,这里要调用 Todo 组件的方法时,应该这样调用:

hideOtherInput(group){
//通过遍历的形式去方法,子组件的方法
  this.$refs.childTodo.forEach(function(child){
    child.checkAndHideGroupInputForm(group.objectId);
  })
}        

子组件调用父组件方法

比如 Header 组件内部需要调用 APP 组件的方法,这里使用 $emit 机制,有种类似回调,在子组件中触发父组件方法,如下所示,Header 中有一个点击事件需要调用 App 组件的方法,则直接在 Header 的点击方法中,这样使用:


showAboutDialog() {
    this.$emit('showAbout')
}

这里直接回触发父组件中 showAbout 的实现,这里如果想要生效,就需要在父组件使用 Header 的地方定义好对应的回调,如下所示
app.vue

<templete>
  <Header
      @showAbout="showAboutDialog"
  />
</templete>
export default{
    data(){
    },
    methods(){
        showAboutDialog(){
            console.log('test'); 
        }
    }
}  

这样,就相当于建立好了一个映射关系,showAbout 的实现是 showAboutDialog 这个方法,最终子 组件内部会成功触发父组件中的 showAboutDialog 方法。

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • 一两年没吃的薯饼了 估计是 懒得起早去麦当劳 ……
    咖喱鱼丸好好吃阅读 158评论 0 0
  • 来自全国各地的几百位企业家,欢聚一堂,一起打开心门!一起突破自己!一起绽放自己的魅力,一起蜕变自己的灵魂!让自己真...
    吕铭静阅读 2,365评论 5 9
  • 唯一的日子(帕斯捷尔纳克) 在许多严冬季节里 我记得冬至那几天。 每个日子纵然不会重复, 却又数不胜数地再现。 那...
    小王子的狐狸先森阅读 803评论 0 0
  • 【31】 安葬了我奶奶,眨眼到了2010年,我爹再不能像以前那样为所欲为了,因为两委班子,六个人,七八个心眼儿,他...
    子鱼ziyu阅读 539评论 0 1