VueJs Passing data as props
So within the user-component.js in the template property, where we include the
Props - Dynamic Binding
Since we are dynamically binding the props any change in phone or email within the parent component i.e.
Props - as Literals
However, if we would have passed the values of phone and email as string literal values like phone="(44) 777 0007 0077" email="firstname.lastname@example.org" then it would not reflect any data changes which happen in the parent component.
By default the direction of changes is top to bottom i.e. any change to dynamically bound props in the parent component will propagate to the child component but any change to the prop values in a child component will not propagate to the parent.
For eg: if from within the
However, if we change the value of email from email@example.com to firstname.lastname@example.org in the parent component (
If we want two-way binding then we have to explicitly specify two-way binding as :email.sync="email" instead of :email="email". Now if we change the value of prop in the child component the change will be reflected in the parent component as well.
In a medium to large app changing parent state from the child state will be very hard to detect and keep track of especially while debugging - Be cautious .
There won't be any .sync option available in Vue.js 2.0. The two-way binding for props is being
deprecated in Vue.js 2.0.
It is also possible to define explicit one-time binding as :email.once="email, it is more or less similar to passing a literal, because any subsequent changes in the parent property value will not propagate to the child.
When Object or Array is passed as prop, they are ALWAYS PASSED BY REFERENCE, which means irrespective of the binding type explicitly defined :email.sync="email" or :email="email" or :email.once="email", if email is an Object or an Array in the parent then regardless of the binding type, any change in the prop value within the child component will affect the value in the parent as well.
Props as Array
In the contact-details.js file we have defined props:['phone', 'email'] as an array, which is fine if we do not want fine grained control with props.
Props as Object
If we want more fine grained control over props, like
• if we want to define what type of values are acceptable as the prop
• what should be a default value for the prop
• whether a value is MUST (required) to be passed for the prop or is it optional
then we need to use object notation for defining the props, as we have done in address.js.
If we are authoring reusable components which may be used by other developers on the team as well, then it is a good practice to define props as objects so that anyone using the component has a clear idea of what should be the type of data and whether it is compulsory or optional.
It is also referred to as props validation. The type can be any one of the following native constructors:
• or a Custom Constructor
camelCase vs kebab-case
HTML attributes are case-insensitive, which means it cannot differentiate between addresstype and addressType, so when using camelCase prop names as attributes we need to use their kebabcase(hyphen-delimited) equivalents:
addressType should be written as address-type in HTML attribute.
Just as you're able to bind data from a view to the model, you can also bind props using the same v-bind directive for passing information from parent to child components.
Passing Props While Using Vue JSX
We have a parent component: Importing a child component in it we'll pass props via an attribute. Here the attribute is 'src' and we're passing the 'src' too.
And a child component, where we need to pass props. We need to specify which props we are passing