React和Vue中暴露子组件的属性和方法给父组件用，并且控制子组件暴露的颗粒度的做法

news2024/12/14 17:41:01

React

在 React 中，forwardRef 是一种高级技术，它允许你将 ref 从父组件传递到子组件，从而直接访问子组件的 DOM 节点或公开的方法。这对于需要操作子组件内部状态或 DOM 的场景非常有用。为了使子组件能够暴露其属性和方法给父组件，通常会结合 useImperativeHandle Hook 使用 forwardRef。

如何使用 `forwardRef` 和 `useImperativeHandle`

创建一个带有 forwardRef 的子组件:
- 使用 React.forwardRef 来创建一个接受 ref 参数的组件。
使用 useImperativeHandle 定义要暴露的方法和属性:
- 在子组件中使用 useImperativeHandle 来定义哪些方法或属性应该通过 ref 暴露出去。
在父组件中使用 ref 来访问子组件的公开接口:
- 创建一个 ref 并将其传递给子组件，然后通过这个 ref 访问子组件暴露的方法或属性。

示例代码

子组件 (`ChildComponent.js`)

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  // 定义要暴露的方法
  useImperativeHandle(ref, () => ({
    focusInput: () => {
      inputRef.current.focus();
      console.log('子组件的输入框获得了焦点');
    },
    getInputValue: () => inputRef.current.value,
  }));

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="这是子组件的输入框" />
    </div>
  );
});

export default ChildComponent;

父组件 (`ParentComponent.js`)

import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

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

  const handleFocus = () => {
    if (childComponentRef.current) {
      childComponentRef.current.focusInput();
    }
  };

  const handleGetValue = () => {
    if (childComponentRef.current) {
      const value = childComponentRef.current.getInputValue();
      console.log('子组件的输入值:', value);
    }
  };

  return (
    <div>
      <ChildComponent ref={childComponentRef} />
      <button onClick={handleFocus}>让子组件的输入框获得焦点</button>
      <button onClick={handleGetValue}>获取子组件的输入值</button>
    </div>
  );
};

export default ParentComponent;

解释

子组件 (ChildComponent.js):
- 使用 forwardRef 创建了一个接受 ref 参数的组件。
- 使用 useImperativeHandle 定义了 focusInput 和 getInputValue 方法，并将它们绑定到传入的 ref 上。这意味着父组件可以通过 ref 访问这些方法。
父组件 (ParentComponent.js):
- 创建了一个 ref (childComponentRef) 并将其传递给 ChildComponent。
- 提供了两个按钮，分别用于调用子组件的 focusInput 和 getInputValue 方法。

这种方法确保了父组件可以安全地与子组件进行交互，同时保持良好的封装性。通过 useImperativeHandle，你可以精确控制哪些方法或属性是公开的，而不会意外地暴露不必要的实现细节。

Vue

当你通过 ref 获取到子组件的根 DOM 元素后，你可以使用标准的 DOM API 来访问或操作该元素及其子元素。如果你想要访问 <p> 标签，可以通过多种方式实现，具体取决于你想要进行的操作。

访问子元素的方法

使用 querySelector 或 querySelectorAll:
- 这些方法允许你根据选择器（如标签名、类名、ID 等）来查找特定的子元素。
遍历子节点:
- 你可以使用 children、childNodes 或其他类似属性来遍历子节点。
直接访问特定子元素:
- 如果你知道子元素的具体位置，可以直接通过 firstElementChild、lastElementChild 等属性访问。

示例代码

假设你想在父组件中访问并打印子组件中的 <p> 标签的内容，可以按照以下方式修改你的代码：

子组件 (`ChildComponent.vue`)

<template>
  <div ref="root">
    <p id="content">这是子组件的内容</p>
  </div>
</template>

<script setup>
import { defineExpose, ref } from 'vue';

const root = ref(null);

// 使用 defineExpose 显式暴露给父组件的方法或属性
defineExpose({
  getRootEl: () => root.value,
});
</script>

父组件 (`ParentComponent.vue`)

<template>
  <ChildComponent ref="childComponent" />
  <button @click="handleClick">点击我</button>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const childComponent = ref(null);

const handleClick = () => {
  if (childComponent.value) {
    // 调用子组件的公开方法来获取 DOM 引用
    const el = childComponent.value.getRootEl();
    
    // 使用 querySelector 查找 <p> 标签
    const pElement = el.querySelector('p#content');
    console.log('子组件的 <p> 内容:', pElement?.textContent);
  }
};
</script>

解释

子组件 (ChildComponent.vue):
- 我们为 <p> 标签添加了一个 id="content"，以便更容易地通过 querySelector 查找它。
父组件 (ParentComponent.vue):
- 在 handleClick 方法中，我们首先调用 getRootEl 获取子组件的根元素。
- 然后，使用 querySelector 方法通过 ID 选择器查找 <p> 标签，并打印其文本内容。这里使用了可选链操作符 (?.) 来安全处理可能为 null 的情况。