如何将属性直接传递给 vuejs 中的组件，例如 reactjs

Question

这是 react.js 中的示例：

表单.jsx

<FormInput
 type='text'
 name='displayName'
 value={displayName}
 onChange={this.handleChange}
 required
/>

输入.jsx

const FormInput = ({ handleChange, ...otherProps }) => (
    <input className="form-input" onChange={handleChange} {...otherProps} />
)

我的问题是，如何将属性传递给具有扩展对象的其他组件？ 像 react.js

Answer 1

请参阅文档的此页面。 通过使用v-bind （没有扩展运算符）绑定对象， Vue.js在内部将提取每个属性并将它们作为单独的 props 传递。 在上面的示例中，您将执行以下操作：

<form-input
    type="text"
    name="displayName"
    required
    v-bind="otherProps"
    v-on:change="handleChange"
></form-input>

执行上述操作与手动一个接一个地传递所有道具相同，如下所示：

<form-input
    type="text"
    name="displayName"
    required
    v-bind:prop1="otherProps.prop1"
    v-bind:prop2="otherProps.prop2"
    v-bind:prop3="otherProps.prop3"
    ... etc ...
    v-on:change="handleChange"
></form-input>