vue 子父调用

我笔记2025-12-09 20:11

在 Vue 中，父页面调用子页面方法的 最简单、最常用方式 是通过 ref 引用（Vue 2 和 Vue 3 通用，语法略有差异）。以下是具体实例，包含核心代码和详细说明：

核心原理

父组件给子组件添加 ref 属性（相当于给子组件起一个 "标识名"）；
父组件通过 this.$refs.标识名（Vue 2）或 ref变量.value（Vue 3 组合式 API）获取子组件实例；
直接调用子组件实例上的方法即可。

一、Vue 2 实例（选项式 API）

1. 子组件（Child.vue）

定义需要被父组件调用的方法（如 childMethod）：

vue

复制代码

<template>
  <div>我是子组件</div>
</template>

<script>
export default {
  methods: {
    // 子组件的方法（可接收父组件传递的参数）
    childMethod(params) {
      console.log("子组件方法被调用！", "父组件传参：", params);
      // 子组件的业务逻辑...
      return "子组件返回值";
    }
  }
};
</script>

2. 父组件（Parent.vue）

通过 ref 引用子组件，然后调用其方法：

vue

复制代码

<template>
  <div>
    <h3>我是父组件</h3>
    <!-- 给子组件添加 ref 属性，标识名为 "childRef" -->
    <Child ref="childRef" />
    <!-- 触发调用的按钮 -->
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
// 引入子组件
import Child from "./Child.vue";

export default {
  components: { Child }, // 注册子组件
  methods: {
    callChildMethod() {
      // 1. 通过 $refs 获取子组件实例
      const childInstance = this.$refs.childRef;
      
      // 2. 调用子组件的方法（可传参、可接收返回值）
      const result = childInstance.childMethod({ name: "父组件", age: 20 });
      
      console.log("子组件返回值：", result);
    }
  }
};
</script>