时间戳

首页 > 解决方案 > Vue 3 组合 API，如何在 setup() 函数中获取上下文父属性？

vue.js - Vue 3 组合 API，如何在 setup() 函数中获取上下文父属性？

问题描述

我遇到了 Vue 3 (alpha 4) 的问题：

在setup()函数内部，我试图读取父组件。根据 https://vue-composition-api-rfc.netlify.com/api.html#setup上的文档，它应该通过context参数公开父级，作为 context.attrs 的属性或直接作为父级（参见SetupContext'打字'下的位）。我发现文档对于是否parent应该直接从SetupContext或 via访问不是很清楚SetupContext.attrs，所以我尝试了两种方式，但无济于事。

这是我的问题，我可以在记录它们时访问SetupContextand SetupContext.attrs（这是一个代理）就好了。SetupContext.attrs公开通常的代理属性（和） [[Handler]]，并且在检查时清楚地显示父属性。[[Target]][[IsRevoked]][[Target]]

但是，当记录父级时，它只会打印出未定义的：

export default {
  setup(props, context) {
    console.log(context);
    // Output: {attrs: Proxy, slots: Proxy, emit: ƒ}
    console.log(context.attrs);
    // Output: Proxy {vnode: {…}, parent: {…}, appContext: {…}, type: {…}, root: {…}, …}
    console.log(context.attrs.parent);
    // Output: undefined
  }
};

传播上下文会产生相同的结果：

export default {
  setup(props, { attrs, parent }) {
    console.log(attrs);
    // Output: Proxy {vnode: {…}, parent: {…}, appContext: {…}, type: {…}, root: {…}, …}
    console.log(attrs.parent);
    // Output: undefined
    console.log(parent);
    // Output: undefined
  }
};

我对 JavaScript 中的代理有点陌生，但是从我读到的关于它们的内容来看，以及从尝试响应 () 例如返回的代理。我应该能够像通常使用对象一样访问该属性。关于我做错了什么的任何想法？

我创建了一个代码框来重现问题

标签： vue.jsvuejs3vue-composition-api

解决方案

您可以使用getCurrentInstance. Vue 文档。

它很简单：

import { getCurrentInstance } from "vue";
export default {
  setup(props) {
    const instance = getCurrentInstance();
    console.log("parent");
    console.log(instance.parent);
  }
}

此外，可能值得注意的是，Vue 组合 API 插件以相同的方式公开父级，但它在那里被引用instance.$parent。

推荐阅读