Vue中如何获取父模板组件

Posted 2023-02-23

【中文标题】Vue中如何获取父模板组件

【英文标题】：How to get the parent template component in Vue

【发布时间】：2017-11-07 02:32:26

【问题描述】：

我知道在vue中，我可以使用this.$parent来获取vdom树中的上层组件。但我期待一些不同的东西：获取呈现当前组件的组件。

例如，我有一个带有模板的组件（名为comp-container）：

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

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

我目前的方法是遍历$parent 属性，直到我发现comp-b 存在于$options.components 中。这种方法目前有效，但如果comp-b 是一个全局注册组件，它看起来很丑陋并且会中断。有没有官方的方法可以做到这一点？

通过 props 将父模板组件传递为 <comp-b :container="this"></comp-b> 可能会完成这项工作，但它太冗长而无法被喜欢。

【问题讨论】：

你需要访问父组件的原因是什么？目前我没有多大意义。

我不确定我是否完全理解您要执行的操作，但您可以检查 $parent.$vnode.tag 并检查它是否包含您的容器名称。

@TwilightSun - 你知道怎么做吗？

【参考方案1】：

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

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

仅使用 Vue 2 测试