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 方法。