Vue实现兄弟组件间的方法调用及回调

最新推荐文章于 2025-06-02 20:30:55 发布

原创最新推荐文章于 2025-06-02 20:30:55 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文介绍了在Vue中如何实现兄弟组件之间的方法调用和回调。通过在父组件定义方法并传递给子组件，实现了从树形组件到房屋信息组件的新增方法调用，并展示了回调过程。文中提供了father.vue、tree.vue和houseInfo.vue的示例代码，强调了回调作为句柄可以穿透多层组件进行调用。实际开发中可能涉及更复杂的逻辑，如对话框关闭或确认条件判断。

Vue实现兄弟组件间的方法调用及回调

看兄弟间数据传递的看我写的这篇文章：vue实现兄弟组件间的实时通信

先说说我遇到的情况：
在这里插入图片描述

点击左侧树tree，需要调用右侧houseInfo组件中的新增方法，弹出新增窗口。
还需要拿到门牌号的回调（有可能删掉对话框，实际开发我还判断了用户按了确定才回调，比较复杂这里就不说了）

演示图：

点击houseInfo的新增效果
在这里插入图片描述

点击tree的新增效果
在这里插入图片描述

实现Implementation

1.首先在父组件引入子组件tree和houseInfo,在method定义方法handleCreate

2.父组件调用tree组件时传入@handleCreate=“handleCreate”，调用house组件传入ref=“house”

3.tree组件定义调用父组件的方法，houseInfo定义被调用方法

father.vue

<template>
  <el-row :gutter="20">
    <el-col :span="5"><div class="grid-content bg-purple " />
      <!--  树组件 -->
      <edit-tree :id="id" @handleCreate="handleCreate"/>
    </el-col>
    <el-col class="border-yes" :span="18"><div class="grid-content bg-purple-light" />
      <div class="dashboard-editor-container">
        <el-row :gutter="32">
          <el-col class="border-yes">
            <div class="chart-wrapper">
              <!-- 信息组件 -->
              <houseInfo ref="house" :id="id"/>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import EditTree from './component/editTree'
import HouseInfo from './component/houseInfo'
export default {
  name: 'father',
  components: {
    EditTree,
    HouseInfo
  },
  data() {
    return {
      id: 1
    }
  },
  methods: {
    handleCreate(data, callback) {
      this.$refs.house.handleCreate(data, callback)
    }
  }
}
</script>

tree.vue

  methods: {
    append(data, node) {
      this.$emit('handleCreate', [node.data.id, node.parent.data.id], (loading) => {
        if (loading) {
          // 根据回调值操作
          // TODO
        }
      })
    }

houseInfo.vue

 methods: {
    handleCreate(data, callback) { //被调用方法
      if (data) {
        this.temp.floor = data[0]
        this.temp.building = data[1]
      }
      callback(true) //想回调什么数据都可以
    }
  }