查找模板引用最近的父 Vue 组件（Vue 3）

Posted 2023-02-23

【中文标题】查找模板引用最近的父 Vue 组件（Vue 3）

【英文标题】：Find nearest parent Vue component of template ref (Vue 3)

【发布时间】：2021-06-08 00:01:39

【问题描述】：

当挂载一个 Vue template ref 时，我想获取最近的父 Vue 组件。这应该是通用的并且适用于任何模板引用，所以我将它放在一个组合函数中（但这只是一个实现细节）。

我有这个工作，但我的实现在迭代搜索元素的祖先时使用了elem.__vueParentComponent。在阅读 Vue source code 时，我看到 __vueParentComponent 仅在开发模式下启用，或者在生产中启用了开发工具。因此，我不想依赖启用该标志。

我认为这可能使用 vnodes 来实现，但这在谷歌上并不容易。这是我正在尝试做的一个示例：

function useNearestParentInstance(templateRef) 

  function getNearestParentInstance(el) 
    // code here
  

  onMounted(() => 
    const el = templateRef.value;
    const instance = getNearestParentInstance(el);
    // do something with instance
  );

<template>
  <div>
    <SomeComponent>
      <div>
        <div ref="myElem"></div>
      </div>
    </SomeComponent>
  </div>
</template>

<script>
export default 
  setup() 
    const myElem = ref();
    // nearest would be SomeComponent's instance in this case
    useNearestParentInstance(myElem);
    ...
  

</script>

【问题讨论】：

在这种情况下，实际上并不需要以这种方式使用它，因为您可以在 SomeComponent 本身上使用 ref。

是的，我知道我可以添加一个额外的 ref，但这是一种以通用方式使用的东西，理想的实现不应要求此函数的用户为父组件创建一个 ref .

这个用例很难解释。我们正在将 Vue 与旧框架集成，我正在尝试进行无缝集成。使用模板 ref 调用 useNearestParentInstance 对我的 lib 的用户来说是有意义的，但指定父级不会（如果模板更改导致缺陷，父级可能会更改）。

所以你需要最近的 VueParentInstance 对吧？这就是 div 父级不是有效 parentInstance 的原因

是的，没错。我需要访问最近的 Vue 实例的属性。

【参考方案1】：

如果你想要最近的 vue 父级，你可以简单地使用

ref().$parent // Not sure if syntax is same in vue3

ref().$parent 将获得第一个 vue 组件，它是您放置的 ref 的父级。

【讨论】：

$parent 将返回 undefined 因为模板 ref 可能未指向 vue 实例。在本例中，它是一个简单的 div 元素。

$parent 应该针对最近的 Vueparent 而不是它看到的第一个 htmlelement 父级。