将JSX与VueJS一起使用，为什么我的传播操作符分配给$ vnode.data？

Question

我的组件：

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

<InputField {...fieldProps} />

这些道具位于this.$vnode.data而不是this.$props。

当我单独传递道具时，this.$props中会找到道具。

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

Answer 1

如果您错过在props组件中添加InputField密钥，则道具将仅在$vnode中提供，而不在$props中。

props中需要键fieldProps才能使其正常工作。它在代码段here中提到。

所以fieldProps应如下所示：

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

请查看Hello组件中的sandbox内容并对props属性进行评论/取消注释以查看差异。