Можно ли получить данные у компонента, который подключен динамический import?

Question

[Дима Паутов]

Добрый вечер!

Есть такой компонент, внутри которого посредством динамического импорта подключается компонент:

export default {
    name: 'MyComponent',
    components: {
      Test1: () => import('@/components/test1.vue')
    }
  }

Мне нужно обратиться к этому компоненту и получить весь его набор props, которые прописаны у него внутри.
Но из тела MyComponent, я никак не смог найти, как же обратиться к компоненту,подключенному через динамический import.

Единственный вариант, это импортировать компонент через обычный import:

import Test1 from '@/components/test1.vue';

  export default {
    name: 'MyComponent',
    components: {
      Test1
    },
    mounted () {
      console.log(Test1.props); // Так я могу получить список всего его свойств и т.п. данные
    }
  }

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

Возможно ли такое?

Answer 1

[0xD34F]

components: {
  componentName: () => import('...').then(component => {
    console.log(component.default.props);
    return component;
  }),
  ...
},

Comments

[Дима Паутов]

Значит за пределами нельзя получить, по сути логично при таком подключении. Спасибо, что убедили, что иного подхода нет))

[0xD34F]

Дима Паутов, не понял, "нельзя получить" - в смысле, в методах/шаблоне компонента? Если так, то можно, например:

Вне компонента создаёте объект, в который будете складывать описания props'ов:

const PROPS = {};

Делаете его доступным внутри компонента как вычисляемое свойство (ну или в data можно засунуть):

computed: {
  PROPS: () => PROPS,
},

После импорта компонента... понятно, да:

componentName: () => import('...').then(component => {
  Vue.set(PROPS, 'componentName', component.default.props);
  return component;
}),

[Сергей Левченко]

"За пределами" это видимо вне секции components, это возможно, добавил ответ с примером.

Answer 2

[Сергей Левченко]

const Test1 = () => import('@/components/test1.vue');

export default {
  name: 'MyComponent',
  components: {
    Test1
  },
  mounted () {
    Test1().then((m) => {
      // Компонент
      console.dir(m.default);
      // Его пропсы
      console.log(m.default.props);
    });
  }
}