vue props in vue components

When making a vue component there is sometimes a need to have properties for the custom element that is made when developing a component. This is where the vue props option comes into play, it can be used as a way to set some properties for a component just like attributes when it comes to actual html elements. There is a little bit to cover when it comes to vue props such as how to set default values for them an so fort so lets take a look at some examples.

1 - vue props basics

Here I have a basic example of vue props in action. In my html I am just linking to vuejs, and another external javaScript file where I will be placing my original code. I also have a single div element that will serve as a mount point for the example, additional html will be rendered with vuejs via a template.

1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title>vue props example</title>
<script src="/js/vuejs/2.6.10/vue.js"></script>
</head>
<body>
<div id="demo-props"></div>
<script src="./basic.js"></script>
</body>
</html>

Here I have the javaScript that is in the basic.js file that I am linking ot in my html. I just use the vue props option to define a single property for my custom component. The vue props option can also be define with an object notation that might be a better play when it comes to making a more serious vue component, but for a simple example such as this just an array of string names for the properties should work just fine.

1
2
3
4
5
6
7
8
9
Vue.component('custom', {
props: ['foo'],
template: '<div>{{ foo }}</div>'
});
new Vue({
el: '#demo-props',
template: '<div><custom foo="baz"></custom><custom></custom></div>'
});

Once I have the property for my component define I can the use it in other templates that use the custom element in a template.

2 - Setting defaults for a vue prop

To set default values for a property one way is to use the object syntax rather than an array of strings. In place of just a string of the type expected for the property it can be an object with a default property the value of which will be the default value for the property.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Vue.component('custom', {
props: {
foo: {
default:
'foobar'
}
},
template: '<div>{{ foo }}</div>'
});
new Vue({
el: '#demo-props',
template: '<div>' +
'<custom foo="baz"></custom>' + // 'baz'
'<custom></custom>' + // 'foobar'
'</div>'
});