Vue.js Props

Vue.js Props

In this topic, we are going to discuss how we can use the Vue.js props in the Vue.js framework.

Props Casing (camelCase Vs. Kebab-case)

The names of the HTML attributes are case-insensitive, so the browsers view any characters of uppercase as lowercase. Therefore, when we use the in-DOM templates, camelCased prop names are required to use their kebab-cased (hyphen-delimited). If a component wants to one or more props, it should be declared in its prop’s property.

Example: This example explains how we can use the props in the Vue.js application.

Index.html

<!-- kebab case in HTML file -->

<test-component message-title= “hello World!”></test-component>

Main.js

Vue.component (‘test-component’, {

// camelCase in JavaScript

Props: [‘messageTitle’],

Template: ‘<h2>{{ messageTitle }}</h2>

})

Note: This limitation does not apply when we are using the string template.

Props Types

Thus, we have only seen the listed props as an array of strings, like as;

Props: [ ‘string’, ‘number’, ‘array’, ‘boolean”]

Although, we would like every prop to be a value of a specific type. In these cases, we can list props as an object, where the property values and names contain the properties types and names.

Example: This example explains how we can use the various Vue props in the Vue.js application.

Main.js

Vue.component (‘test-component’, {

Props: {

Title: String,

Likes: Number,

isPublished: Boolean,

commentsIds: Array,

author: Object,

callback: Function,

contactPromise: Promise // or any other Vue.js Constructor

}

This code will not only document our component, but it also warns the users in the browser’s JavaScript console when the users pass the wrong type.

Passing Static or Dynamic Props

We have seen both the props passed a static value so far.

Example:

<test-component title= “This is a Static prop example”></test-cpomponent>

We have also seen the props assigned dynamically with the v-bind attribute.

Example:

<-- Assigned dynamically to the value of a variable -->

<test-component v-bind:title = “post.title”></test-component>

In the above two examples, we have passed the string values only, but any type of value can actually be passed to a prop property.

Passing a Number

<!-- this is a JavaScript expression instead a string -->

<test-component v-bind: likes= “25”></test-component>

<!-- Assigned dynamically to the value of a variable -->

<test-component v-bind: likes= “post.likes”></test-component>

Passing a Boolean

<!-- this will imply ‘true’ when we add the prop with no value -->

<test-component isPublished></test-component>

<!-- Although ‘false’ is static, we are required to use v-bind attribute to tell Vue -->

<!-- This is a JavaScript expression instead a string -->

<test-component v-bind: is-published= “false”></test-component>

<!-- Assigned dynamically to the value of a variable -->

<test-component v-bind: is-published= “post.ispublished”></test-component>

Passing an array

<!-- Although an array is static, we are required to use v-bind attribute to tell Vue that -->

<!-- this is a JavaScript expression instead a string -->

<test-component v-bind: comment-ids= “[12, 18, 25, 48]”></test-component>

<!-- Assigned dynamically to the value of a variable -->

<test-component v-bind: comment-ids= “post.commentIds”></test-component>

Passing an object

<!—Although an object is static, we are required to use v-bind attribute to tell Vue that -->

<!-- this is a JavaScript expression instead a string -->

<test-component

            v-bind: author= “{

            name: ‘John carry’,

            company: ‘George Dynamics’

}”>

</test-component>

<!-- Assigned dynamically to the value of a variable -->

<test-component v-bind: author= “post.author”></test-component>

Passing the Properties of an object

If we want to pass all the object properties as prop’s attribute, we can use the v-bind attribute without any argument. We can apply a v-bind attribute instead of v-bind: prop-name attribute.

Let's take an example using a post object:

Example:

Post: {

id: 1,

title: ‘This is an object properties example’

}

With the following template in the HTML file:

<test-component v-bind= “post”></test-component>

This template will be equivalent to:

<test-component

            v-bind: id= “post.id”

            v-bind: title= “post.title”>

</test-component>

One-way Data flow

By default, the data flows to the child component from the parent component. This data flow helps to prevent accidental mutation in the parent state (this makes our Vue app’s data flow harder to understand).

Whenever we want to be update the parent components, all the props in the child component will be changed with the new value. It means that we shouldn’t be trying to mutate a prop inside the child component. If we do this, Vue will warn us in the console.

In these two cases we can be tempted to mutate a prop, as given below:

  • The prop property is used to pass an initial value; afterward, the child component wants to apply it as a local data property. In these cases, the prop’s property can be used as its initial value when we define a local data property.

Example:

props: [ ‘initialCounter’ ],

data: function () {

return {

counter: this.initialCounter

}

}

  • When we want to transform a prop which is passed in as a raw-value, it is required to declare a computed property that uses the prop’s value.

Example:

props: [ ‘size’ ],

computed: {

normalizedSize: function ()

return this.size.trim().toLowerCase()

}

}

Props Validation

Vue components can define the needs of the prop’s property. If any requirement doesn’t fulfill, it will warn us in the JavaScript console of our browser. Generally, it's useful when we develop a component, and the others are going to use it.

If we want to define the validation of the props, we can provide to the props value an object with validation needs, rather than an array string.

Example: This example explains how we can use the props validation in the Vue.js props.

Vue.component (‘test-component’, {

props: {

// the basic type check (‘null’ and ‘undefined’ values will be applied any type of the validation)

propA: Number,

// the multiple possible types

propB: [String, Number],

// the required string

propC: {

type: String,

required: true

},

// Default value number

propD: {

type: Number,

default: 25

},

// Default value object

propE: {

type: Object,

// default array or an object must be returned from factory function

default: function () {

return { message: ‘this is a prop validation example’ }

}

},

// the custom validator functions

propF: {

validator: function (value) {

// the value must be watch one of these strings

return [ ‘success’, ‘warning’, ‘danger’ ].indexOf(value) !== -1

}

}

}

})

When the prop validation fails, Vue will warn us in the JavaScript console of our browser.

Type Checks

The type may be one of the native constructors from the following constructors:

  • String
  • Boolean
  • Number
  • Date
  • Function
  • Array
  • Object
  • Symbol

Furthermore, the type may also be a custom constructor function, and an assertion is made with an instance of a check.

Example:

Function person (name, address) {

this.name = name

this.address = address

}

And we can use this:

Vue,component (‘test-component’, {

Props: {

Author: person

}

})

To validate that the author prop’s value was built with a new Person.

Non-Prop Attributes

The non-prop attribute is an attribute, which is passed to a Vue element but does not have a prop defined for it.

It is very important when we are creating the external CSS libraries that can’t always know the full context in which the components might be used.

For example, suppose we are using a third-party bootstrap-date-input feature with a bootstrap plugin that needs a data-date-picker property on the input. We can add this property to our Vue instance component.

Example:

<bootstrap-date-input data-date-picker= “activated”></bootstrap-date-input>

Replacing/Merging with Existing Attributes

Let’s consider this as the template for bootstrap-date-input attribute:

<input type= “date” class= “form-control”>

We may require to add the specific class to define a theme for our date picker plugin.

<bootstrap-date-input

            Data-date-picker= “activated”

            Class= “date-picker-theme-dark”>

</bootstrap-date-input>

Disabling attribute Inheritance

If we don’t want the root element of the Vue component to inherit an attribute, we must set the inheritAttrs: false attribute in the options of the components.

Example:

Vue.component (‘test-component’, {

inheritAttrs: false,

})

By adding the attributes inheritAttr and $attrs, we can manually decide the element that we want to forward attributes to, which are generally desirable for the base element.

Example:

Vue.component ( ‘test-component’, {

inheritAttrs: false,

props: [ ‘message’, ‘value’ ],

template[h1] :

<component>

            {{ message }}

            <input v-bind: “$attrs”

            v-bind: value= “value”

            v-on: input= “$emit(‘input’, $event.target.value)”>

</component>

})


 [h1]y