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

setup()函数中,我试图读取父组件.根据https://vue-composition-api-rfc.netlify.com/api.html#setup上的文档,它应该通过context参数公开父对象,或者作为上下文的属性.ATTR或直接作为父项(参见"键入"下的SetupContext位).我觉得文档中不太清楚parent是应该直接从SetupContext访问,还是通过SetupContext.attrs访问,所以我try 了两种方法,但都没有用.

这里是我的问题,我可以访问SetupContextSetupContext.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中的代理有点陌生,但从我对它们的阅读,以及对由reactive()返回的代理的实验来看.我应该可以像平常一样用一个物体来访问这个房产.你知道我做错了什么吗?

我创建了一个codesandbox来重现这个问题

推荐答案

你可以用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以相同的方式expose 父对象,但在这里被引用为instance.$parent.

Vue.js相关问答推荐

Vue3:如何在功能组件中重用插槽vnode

为什么 Pinia/Vuex 比使用服务类的classic 方法更受欢迎?

手动触发对观察到的对象/数组的更新

在 Vue 文件中创建根 Vue 实例

为什么组件在 v-if 下没有被销毁

带有 vue.js 的 img 网址

如何将参数传递给使用 ...mapActions(...) 映射的函数?

Vuejs 2,VUEX,编辑数据时的数据绑定

NuxtServerInit 在 Vuex 模块模式下不起作用 - Nuxt.js

使用 Vue.js 的用户可切换自定义主题

在 v-for 循环中使用 v-model

如何突出显示 Vuetify 菜单中的选定项目?

样式化 Vue 插槽

Vue.js 的 $emit 和 $dispatch 有什么区别?

如何从方法内部访问数据

beforeCreate 挂钩中的 Vue 2.1 调用方法不起作用

Vue 2.0 设置路由 - 不要使用new来产生副作用

Vue.JS 2.0 修改不相关数据时速度慢

Vue 3 组合 API 数据()函数

如何删除 vue cli 2?