Question

我正在尝试找出子组件的默认属性（props）。在此示例中，我有两个组件A和B。 B环绕A，并且A被传递了属性。我想弄清楚包裹在组件A中的组件B的默认值是什么，最重要的是为默认值指定的类型。需要明确的是，在mounted的{{1}}函数中，我希望能够看到B的默认值和类型，假设A总是正好有1个孩子组件。

我尝试在B生命周期挂钩中使用this.$children[0]._props来获取子组件，但是那些属性是已设置的。我尝试过早在Vue lifecycle中获取属性（例如mounted，created，beforeCreate等），除非它们似乎在挂载之前不存在。我还使用浏览器控制台检查了beforeMount对象，还没有发现props的任何默认值（只有获取覆盖默认值的getter函数）。我愿意将额外的数据传递给this.$children[0]以获取默认属性，但不希望这样做（因为它看起来很多余，即通过查看{{我应该知道组件“起源”是什么） 1}}对象）。

最小示例位于：https://codepen.io/maxschommer/pen/wvaqGjx 我在下面包含了HTML和JS，以供快速参考。

JS：

HTML：

this.$children[0]

PS：在引用Vue时，我对组件和元素之间的区别感到困惑（我相信组件是JS对象，而元素是在将它们呈现为html时呈现的），因此如果我理解了，请更正我的术语错误的。

Answer 1

您可以从this.$options访问原始选项对象（您为Vue提供的用于构造组件实例的对象），因此

mounted() {
  const propDfns = this.$options.__proto__.props
  const propTypes = Object.values(propDfns).map(p => p.type.name) 
  console.log(propTypes)
},

Answer 2

组件不仅是JS对象。它们是js，html或模板和css的混合物

Vue-安装后访问子组件默认道具

2 个答案: