javascript - 将 JSX 与 VueJS 一起使用，为什么我的传播运算符 Prop 分配给 $vnode.data？

Question

我的组件:

const fieldProps = { name: 'phone', value: '' }

<InputField {...fieldProps} />

这些 Prop 可以在 this.$vnode.data 中找到而不是 this.$props .

当我单独传递 Prop 时，在 this.$props 中找到 Prop .

即:<InputField name={'phone'} value="" />

Answer 1

如果您错过了在 InputField 组件中添加 props 键，则 Prop 将仅在 $vnode 中可用，而在 中不可用$ Prop 。

fieldProps 中需要关键的 props 才能使其工作。在代码片段中提到了 here .

所以 fieldProps 应该是这样的:

const fieldProps = {
    props: { name: 'phone', value: '' }
}

请看这个sandbox在 Hello 组件中注释/取消注释 props 属性以查看区别。