VueJs Passing data as props

So within the user-component.js in the template property, where we include the component, we are passing the phone and the email data from (parent component) to (child component) by dynamically binding it to the props - :phone="phone" and :email="email which is same as v-bind:phone="phone" and v-bind:email="email"

Props - Dynamic Binding

Since we are dynamically binding the props any change in phone or email within the parent component i.e. will immediately be reflected in the child 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="bond@mi6.com" then it would not reflect any data changes which happen in the parent component.

One-Way binding

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 we change the email from bond@mi6.com to jamesbond@mi6.com, the parent data i.e. phone data property in will still contain a value of bond@mi6.com.

However, if we change the value of email from bond@mi6.com to jamesbond@mi6.co in the parent component ( in our use case) then the value of email in the child component ( in our use case) will change to jamesbond@mi6.com automatically - change in parent is instantly propagated to the child.

Two-Way Binding

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.

One-time Binding

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.

CAVEAT

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:
• String
• Number
• Boolean
• Array
• Object
• Function
• or a Custom Constructor

Vue.component('example', {
 props: {
 // basic type check (`null` means accept any type)
 propA: Number,
 // multiple possible types (1.0.21+)
 propM: [String, Number],
 // a required string
 propB: {
 type: String,
 required: true
 },
 // a number with default value
 propC: {
 type: Number,
 default: 100
 },
 // object/array defaults should be returned from a
 // factory function
 propD: {
 type: Object,
 default: function () {
 return { msg: 'hello' }
 }
 },
 // indicate this prop expects a two-way binding. will
 // raise a warning if binding type does not match.
 propE: {
 twoWay: true
},
 // custom validator function
 propF: {
 validator: function (value) {
 return value > 10
 }
 },
 // coerce function (new in 1.0.12)
 // cast the value before setting it on the component
 propG: {
 coerce: function (val) {
 return val + '' // cast the value to string
 }
 },
 propH: {
 coerce: function (val) {
 return JSON.parse(val) // cast the value to Object
 }
 }
 }
});

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.

Dynamic Props

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.

JS

new Vue({
 el: '#example',
 data: {
 msg: 'hello world'
 }
});
Vue.component('child', {
 props: ['myMessage'],
 template: '<span>{{ myMessage }}</span>
});

HTML

<div id="example">
 <input v-model="msg" />
 <child v-bind:my-message="msg"></child>
<!-- Shorthand ... <child :my-message="msg"></child> -->
</div>

Result

hello world

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.

ParentComponent.js

import ChildComponent from './ChildComponent';
export default {
 render(h, {props}) {
 const src = 'https://cdn-images-1.medium.com/max/800/1*AxRXW2j8qmGJixIYg7n6uw.jpeg';
 return (
 <ChildComponent src={src} />
 );
 }
};

And a child component, where we need to pass props. We need to specify which props we are passing

ChildComponent.js:

export default {
 props: ['src'],
 render(h, {props}) {
 return (
 <a href = {props.src} download = "myimage" >
 Click this link
 </a>
 );
 }
};