Vue巧取子组件数据，掌握React组件实例的秘密

2023-10-14 10:49:42

组件数据获取的秘诀：使用 ref 在 Vue 和 React 中解锁跨组件通信

摘要

在现代 JavaScript 应用程序开发中，组件化是一个关键概念，它允许我们创建可重用的、松散耦合的代码块。组件间通信对于构建交互式、动态的应用程序至关重要。本文将深入探讨如何在 Vue 和 React 中使用 ref 属性获取组件实例的数据，从而实现高效的组件间通信。

一、Vue 中使用 ref 获取子组件的数据

理解 ref 属性

ref 属性是一个特殊的指令，允许我们获取组件实例的引用。它通过创建一个指向组件实例的属性来实现这一点。

获取子组件实例

在父组件中，我们可以使用 ref 属性指向子组件。这可以通过以下方式实现：

<template>
  <ChildComponent ref="child" />
</template>

<script>
export default {
  mounted() {
    const childInstance = this.$refs.child;
    // 现在我们可以访问 childInstance 的数据和方法
  }
};
</script>

访问子组件数据

一旦我们有了子组件实例的引用，就可以访问其数据。例如，我们可以访问子组件的 data 属性来获取其状态：

const childData = childInstance.data;

二、React 中使用 ref 获取组件实例的数据

React 中的 ref

React 中的 ref 类似于 Vue 中的 ref，但它是通过函数而不是指令来实现的。这允许我们使用更灵活的方法来获取组件实例。

获取组件实例

在父组件中，我们可以使用 useRef 钩子创建 ref：

import { useRef } from 'react';

const ParentComponent = () => {
  const childRef = useRef(null);
  return <ChildComponent ref={childRef} />;
};

访问组件数据

类似于 Vue，我们可以使用 current 属性来访问组件实例：

const childInstance = childRef.current;
const childData = childInstance.props.data;

示例代码

以下是 React 中使用 ref 获取子组件数据的示例：

import React, { useRef } from 'react';

const ChildComponent = ({ data }) => <div>{data}</div>;

const ParentComponent = () => {
  const childRef = useRef(null);

  return (
    <div>
      <ChildComponent ref={childRef} data="子组件数据" />
      <button onClick={() => { console.log(childRef.current.props.data) }}>获取子组件数据</button>
    </div>
  );
};