深入理解 Vue3 组件通信：$ref 与 $parent 的运用

目录

深入理解 Vue3 组件通信：$ref 与 $parent 的运用

$ref：精准访问组件实例

获取子组件实例

获取 DOM 元素引用

$parent：访问父组件实例

子组件访问父组件数据

子组件调用父组件方法

$ref与$parent的注意事项

---

在 Vue3 的开发中，组件通信是构建复杂应用必不可少的环节。其中，$ref与$parent作为两种重要的通信方式，各自有着独特的应用场景和使用方法。本文将结合实际代码，深入探讨这两种组件通信方式在 Vue3 中的运用。

$ref：精准访问组件实例

在 Vue3 里，$ref是一个用于获取组件实例或 DOM 元素引用的属性。它的作用非常强大，能让我们在父组件中直接访问子组件的方法、数据以及 DOM 元素，实现父子组件间的高效通信。

获取子组件实例

假设我们有一个父组件Parent.vue和一个子组件Child.vue。在Child.vue中定义一个方法getChildData，用于返回子组件内部的数据：

<!-- Child.vue -->
<template>
  <div>这是子组件</div>
</template>

<script setup lang="ts">
const getChildData = () => {
  return "子组件的数据";
};
</script>

在Parent.vue中，通过$ref来访问Child.vue组件实例，并调用其getChildData方法：

<!-- Parent.vue -->
<template>
  <Child ref="childRef" />
  <button @click="getParentData">获取子组件数据</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Child from './Child.vue';

const childRef = ref(null);
const getParentData = () => {
  if (childRef.value) {
    const data = childRef.value.getChildData();
    console.log(data);
  }
};
</script>

在上述代码中，先在Parent.vue模板里给Child组件添加ref属性并绑定一个ref变量childRef。当点击按钮时，通过childRef.value访问子组件实例，进而调用子组件的方法获取数据。

获取 DOM 元素引用

$ref不仅能获取组件实例，还能获取 DOM 元素引用。在Child.vue模板中添加一个输入框，并通过$ref获取其引用：

<!-- Child.vue -->
<template>
  <div>
    <input type="text" ref="inputRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputRef = ref(null);
const focusInput = () => {
  if (inputRef.value) {
    inputRef.value.focus();
  }
};
</script>

在Parent.vue中，通过$ref获取Child.vue中输入框的引用，并调用focusInput方法让输入框获取焦点：

<!-- Parent.vue -->
<template>
  <Child ref="childRef" />
  <button @click="focusChildInput">聚焦子组件输入框</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Child from './Child.vue';

const childRef = ref(null);
const focusChildInput = () => {
  if (childRef.value) {
    childRef.value.focusInput();
  }
};
</script>

这里通过$ref在父组件中操作子组件的 DOM 元素，实现了聚焦输入框的功能。

$parent：访问父组件实例

$parent是 Vue 组件实例的一个属性，用于访问当前组件的父组件实例。借助$parent，子组件能获取父组件的数据、调用父组件的方法，实现子组件向父组件的通信。

子组件访问父组件数据

在Parent.vue中定义一个数据变量parentMessage：

<!-- Parent.vue -->
<template>
  <Child />
</template>

<script setup lang="ts">
import Child from './Child.vue';
const parentMessage = '这是来自父组件的消息';
</script>

在Child.vue中，通过$parent访问父组件的parentMessage数据：

<!-- Child.vue -->
<template>
  <div>
    <p>从父组件获取的消息：{{ $parent.parentMessage }}</p>
  </div>
</template>

<script setup lang="ts">
</script>

这样，子组件就能直接获取父组件的数据并展示在页面上。

子组件调用父组件方法

在Parent.vue中定义一个方法getParentMethod：

<!-- Parent.vue -->
<template>
  <Child />
</template>

<script setup lang="ts">
import Child from './Child.vue';
const getParentMethod = () => {
  console.log('父组件的方法被调用了');
};
</script>

在Child.vue中，通过$parent调用父组件的getParentMethod方法：

<!-- Child.vue -->
<template>
  <div>
    <button @click="$parent.getParentMethod">调用父组件方法</button>
  </div>
</template>

<script setup lang="ts">
</script>

当点击子组件中的按钮时，就会调用父组件的方法，在控制台打印出相应的信息。

$ref与$parent的注意事项

• $ref的异步性：由于 Vue 的渲染机制是异步的，在模板渲染完成前获取$ref可能得到null。因此，建议在onMounted钩子函数中使用$ref，确保组件已经渲染完毕。
• $parent的局限性：$parent在多层嵌套组件中使用时，会使组件间的关系变得复杂且难以维护。因为它依赖于组件的层级结构，一旦层级发生变化，可能导致代码出错。而且，过度使用$parent会破坏组件的封装性，使组件间的耦合度变高。

在 Vue3 组件通信中，$ref和$parent各有优劣。$ref适合在父组件中精准操作子组件实例和 DOM 元素；$parent则方便子组件访问父组件的实例成员。在实际开发中，我们应根据具体的业务需求和组件结构，合理选择这两种通信方式，以构建出高效、可维护的 Vue 应用。