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

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 的情况。