如何在Vue中获取父模板组件

Question

我知道在Vue中，我可以使用this.$parent来获取虚拟DOM树中的上层组件。但是我希望得到不同的结果：获取渲染当前组件的组件。

例如，我有一个名为comp-container的组件，其模板如下：

<template>
  <comp-a>
    <comp-b></comp-b>
  </comp-a>
</template>

在comp-b中，$parent应该是comp-a的一个实例，而不是我所期望的comp-container。

我的当前方法是使用$parent属性向上遍历，直到在$options.components中找到comp-b存在。这种方法目前有效，但似乎相当丑陋，并且如果comp-b是全局注册组件，则会出现错误。是否有官方方法来解决这个问题？

通过<comp-b :container="this"></comp-b>作为 props 传递父模板组件可能行得通，但是过于冗长而不受欢迎。

- TwilightSun

---

你需要访问父组件的原因是什么？目前还不太清楚。 - Vincent T

我不确定我完全理解你想做什么，但是你可以检查 $parent.$vnode.tag 并查看它是否包含你的容器的名称。 - Bert

@TwilightSun - 你最终解决了这个问题吗？ - carl-johan.blomqvist

Answer 1

我不确定确切的用例，但基本上如果涉及到插槽（我几乎认为是这样，因为否则$parent将正常工作），您可以在此处找到渲染组件： this.$slots.default[0].context;

基本上，插槽的上下文属性是渲染上下文（渲染组件 - 即呈现组件模板的组件）。

仅在Vue 2中进行了测试

- carl-johan.blomqvist