如何在Nuxt.js中动态获取组件Props

嘿，我之前做组件文档站的时候刚好碰到过一模一样的需求，给你几个实用的解决方案：

方案1：借助Vue全局组件注册表 #

你已经在global.js里通过Vue.component完成了全局注册，这些组件会被存在Vue的全局选项中。直接通过组件名就能拿到组件构造器，进而获取完整的Props定义：

// 在Nuxt插件或者Vue组件的方法里使用
import Vue from 'vue'

// 获取目标组件的构造器
const MyComponent = Vue.options.components['my-component']
// 提取完整的Props定义
const componentProps = MyComponent.options.props

console.log(componentProps)

如果是在Vue组件的实例钩子（比如mounted）里，也可以通过当前实例的根对象访问：

mounted() {
  const MyComponent = this.$root.$options.components['my-component']
  console.log(MyComponent.options.props)
}

方案2：直接导入组件文件（适合明确组件路径的场景） #

如果你清楚组件的文件位置，也可以直接导入组件选项，这种方式更直接，不需要依赖全局注册表：

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

// 直接获取组件定义的Props
console.log(MyComponent.props)

小提示 #

• 如果你的组件是用Vue.extend定义的构造器，直接访问MyComponent.props就能拿到结果；如果是单文件组件导出的选项对象，MyComponent.props就是你在组件里定义的完整Props结构。
• 要是你用的是Nuxt 3（Vue 3），方式会略有不同，需要通过app._componentMap.get('my-component')获取组件定义，但看你的描述应该是Nuxt 2，上面的方案完全适用。

内容的提问来源于stack exchange，提问作者Justin