0

This is example in react.js:

Form.jsx

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

Input.jsx

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

My question is, how can I pass attributes to other components with spread objects? like react.js

1 Answer 1

2

See this page of the documentation. By binding an object using v-bind (without the spread operator), internally Vue.js will extract out each property and pass them as individual props. In your example above, you would do something like this:

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

Doing the above, would be the same as manually passing all of the props one-by-one like so:

<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>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.