Vue3 tsx 中如何同时注册 ref 并传递字符串 ref 属性到子组件?

Question

在Vue3组合式语法中使用tsx , 往一个子组件上注册一个 ref 引用，同时又通过展开运算符... 将一个含有值是字符串的ref属性的 props 传递给子组件，此时子组件上会有2个ref，我该如何在子组件间中得到props中的字符串ref?

代码简单演示：

const nodeRef = ref()
const props = {
    ref:'uuid_xxx',
    //...any more
}
//... more code
return <ChildComp ref="nodeRef" {...props} />

ChildComp 可能是 SFC 也可能是 tsx 组件。

这种设计不友好，但是由于某些原因，目前只能保持现状。

2个 ref ，一个是mounted后赋值为组件实例，一个是想传递到子组件内部的字符串属性。
目前已经做了尝试，无法在子组件中通过 $attrs & useAttrs() 获取到透传的字符串 ref——'uuid_xxx'，但其实'uuid_xxx'值已经通过$attrs的方式挂到 ChildComp 根元素的__id__ attribute上了。

<!-- ChildComp 根元素 -->
<div __id__="uuid_xxx" ...more />

我希望能保持此种情况下，获取到该字符串ref属性值（'uuid_xxx'）。

Answer 1

不如在子组件访问父组件的props，不要强求

Answer 2

"ref" is a reserved property.
"ref"是保留属性。

其实我很好奇你的props是怎么写的?你的props应该无论如何也没有ref这个属性才对.

Answer 3

以下是在 Vue 3 的 TSX 中同时注册 ref 并传递字符串 ref 属性到子组件的示例代码：

import { defineComponent, ref } from 'vue';

interface Props {
  refName: string;
}

const ParentComponent = defineComponent({
  setup(props: Props) {
    const childRef = ref(null);

    return () => (
      <ChildComponent ref={childRef} refName={props.refName} />
    );
  },
});

const ChildComponent = defineComponent({
  setup(props, { attrs }) {
    console.log(attrs.refName); 
    // 在这里可以使用传递进来的 refName 属性
    return () => <div>Child Component</div>;
  },
});

在上述代码中，在父组件中创建了一个 ref 对象 childRef ，并将其与子组件关联，同时将字符串属性 refName 传递给子组件。在子组件的 setup 函数中，可以通过 attrs 获取到传递进来的属性。