如何在 Vue 中动态获取组件道具答案

【问题标题】：How to get Component Props Dynamically in Vue如何在 Vue 中动态获取组件道具
【发布时间】：2018-10-20 19:51:42
【问题描述】：

我正在使用 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);

如果能得到我在my-component 上定义的props 的完整表示会很好

【问题讨论】：

标签： javascript vue.js vuejs2 components

【解决方案1】：

要打印一个 props 数组： console.log(Object.keys(component.props))

【讨论】：

但component 不是可用变量。我试图弄清楚如何将有关组件的信息实际获取到变量中。
@Justin 也许我不确定你在问什么。如果您不在组件的上下文中，您可以像上面一样导入组件并通过Object.keys(MyComponent.props) 访问可用的道具。如果您在组件的上下文中，您可以调用 Object.keys(this.$options.props)，以获取该组件的可用道具数组。

【解决方案2】：

从主 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;

希望对你有帮助。

【讨论】：

我的第一个问题是，如果在export default 之前的代码块中，有没有办法利用this 实例？或者，也许我可以使用某种方法来初始化某个变量，然后可以通过我在该区域中定义的所有其他方法访问这些变量。
主vue实例const vm = new Vue(...)然后vm.$options.components[componentName]？在您描述的情况下，您为什么需要它？