javascript - Vue如何访问父组件的 Prop -导入器不是包装器

Question

总目标:从一个子 Vue 组件，访问它被导入和使用的组件 - 这并不总是与 $parent 相同.这应该通过仅在子组件中进行更改来完成(如果可能)。
我们有PinButton Vue 组件旨在向其他组件添加“固定”功能。该组件在许多其他组件中使用，我们希望能够访问父 props，以便通过将这些 props 传递回父组件来将它们保存并呈现在“固定内容”的不同页面上。
注意:我知道这可以通过手动将父 Prop 向下传递到组件中来实现( <pin-button :parent-props="$props" /> )，但我们试图避免每次使用组件时都必须这样做。
使用单个父组件和子组件的最小复制将表明您可以使用 $parent.$props 访问父 Prop .但是，当子组件作为其他组件的插槽内容嵌套在父组件中时，子组件将获得包装组件的 Prop - 而不是导入和实际使用它的组件。
Sandbox reproduction - 我想获得ParentComponent 的 Prop 来自ChildComponent .通过传递 Prop (我试图避免)来显示预期值，而实际值是 SlotWrapper 的 Prop 组件，不导入 ChildComponent所以我不会认为它是真正的父元素，但它是 <template> 中的直接父元素

Update: Seems like the suggested solution for "arbitrarily deep" access is provide/inject, but this would still seem to require changing all components that use the <pin-button />

Answer 1

要直接回答您的问题，您可以通过组件在其中呈现的“上下文”从 ChildComponent 访问 ParentComponent:

// ChildComponent.vue
computed: {
  expectedProps() {
    return this.$vnode.context.$props
  }
}

但这可能是 "XY"一种问题；我敢肯定，对于您要实现的目标，有更好的设计解决方案。