Как получить компонентный реквизит динамически в Vue

Question

Я использую Nuxt.js для создания своего приложения.

Я создаю приложение, которое продемонстрирует все наши компоненты для целей документирования.У меня есть следующее:

<show-component name="my-component"></show-component>

И мой файл Nuxt.js global.js импортирует и устанавливает мои компоненты:

import ShowComponent from '../components/ShowComponent.vue'
import MyComponent from '../components/MyComponent.vue'

Vue.component('show-component', ShowComponent)
Vue.component('my-component', MyComponent)

Что я хотел бы сделатьв этот момент на экране отображается props, которые используются компонентом, в данном случае: my-component

Я уже могу использовать <my-component> в своем коде шаблона.Как мне использовать его в моем коде JS?Примерно так:

let component = getInstanceOf('my-component'); console.log(component.props);

Было бы неплохо получить полное представление props, которое я определил для my-component

Answer 1

Один из способов доступа к компоненту по имени из основного экземпляра Vue заключается в следующем:

let componentName = 'my-component';
const component = this.$options.components[componentName];

Если вам нужно получить доступ к этому из другого компонента, вам сначала нужно обратиться к основному экземпляру Vue, который будет this.$root, т.е.

const component = this.$root.$options.components[componentName];

и для доступа к реквизитам этого компонента:

let props = component.options.props;

Надеюсь, это поможет.

Answer 2

Для печати массива реквизита: console.log(Object.keys(component.props))