API композиции Vue 3, как получить родительское свойство контекста в функции setup ()?

У меня проблема с Vue 3 (альфа 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]] ясно показывает родительское свойство .

Однако при регистрации родителя он просто выводит undefined:

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 (). Я должен просто иметь доступ к свойству, как обычно с объектом. Есть идеи о том, что я делаю неправильно?

Я создал codeandbox воспроизвести проблему


vue.js vuejs3 vue-composition-api
person TdeBooij    schedule 17.02.2020    source источник
comment
Если вы видите свойство parent в attrs, но attrs.parent не определено, то это потому, что attrs заполнено после того, как вы его зарегистрируете. Вы можете попробовать поместить свой код в onMounted ловушку.   -  person Paleo    schedule 18.02.2020
comment
Хорошее предложение @Paleo, я только что попробовал, но даже в onMounted () оба не определены, к сожалению.   -  person TdeBooij    schedule 19.02.2020
comment
У меня такая же проблема, я не могу получить доступ к цели объекта Proxy в моем компоненте приложения github.com/blacksonic/todomvc-vue-composition-api/blob/master/   -  person VuesomeDev    schedule 05.04.2020
comment
Взгляните здесь и здесь   -  person DarkLite1    schedule 07.05.2020

Ответы (2)


arrow_upward
8
arrow_downward

Вы можете использовать getCurrentInstance. Документация по Vue.

Это так просто, как:

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

Также, вероятно, стоит отметить, что плагин api композиции Vue предоставляет родительский элемент таким же образом, но на него есть ссылка как instance.$parent там.

person Heniker    schedule 15.12.2020

arrow_upward
1
arrow_downward

Я знаю, что это не дает прямого ответа на вопрос, но с помощью provide / inject (https://v3.vuejs.org/guide/component-provide-inject.html) помог мне решить ту же проблему, когда я хотел получить атрибут данных от родительского узла и передать его визуализированному компоненту. , но больше не мог получить доступ к родительскому элементу после обновления с Vue2 до Vue3. Вместо того, чтобы пытаться раскрыть родительский элемент, я передал опору из его набора данных в визуализированный компонент.

Создав приложение, я сделал следующее.

main.js

import { createApp } from "vue";
import MyComponent from './components/MyComponent.vue';

const section = document.getElementById('some-element'); // this element contains a data-attribute which I need to use within the app. In my case, I can't get the data from the component created/mounted function as the section with the data attribute is loaded onto the page multiple times with different attributes each time.

const app = createApp(MyComponent);
    app.provide('dataset', section.dataset.id); // section.dataset.id contains some kind of id, let's say 'abc123' for the sake of this example
    app.use(store); //not relevant for this answer
    app.mount(section);

Затем внутри компонента я мог получить доступ к «набору данных», выполнив следующие действия.

MyComponent.vue

<template>
    <div>Normal template stuff here</div>
</template>
<script>
export default {
    name: 'MyComponent',
    inject: ['dataset'], // the magic
    created() {
        console.log(this.dataset); // will log 'abc123'
    }
}
</script>

Это очень урезано, но я думаю, хорошо показывает мой случай. В любом случае, если вы пытаетесь сделать что-то подобное и хотите получить данные через родительский атрибут данных, вы можете изучить provide / inject.

Надеюсь, это поможет кому-нибудь!

person rubeus    schedule 03.12.2020