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

Question

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

内setup()函数我正在尝试读取父组件。根据 https://vue-composition-api-rfc.netlify.com/api.html#setup 上的文档它应该通过 context 暴露父级参数，要么作为 context.attrs 的属性，要么直接作为父级(参见“打字”下的 SetupContext 位)。我觉得文档不是很清楚 parent应该直接从 SetupContext 访问，或通过 SetupContext.attrs ，所以我尝试了两种方法，但都无济于事。

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

但是，在记录父级时，它只是打印出未定义:

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 中的代理有点陌生，但从我对它们的阅读来看，以及对 react() 返回的代理进行试验。我应该能够像通常使用对象一样访问该属性。关于我做错了什么的任何想法？

我创建了一个 codesandbox重现问题

Answer 1

您可以使用 getCurrentInstance . Vue documentation .
它就像:

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

另外，可能值得注意的是 Vue composition api plugin以相同的方式公开父级，但它被引用为 instance.$parent那里。