如何將屬性直接傳遞給 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>