Optimizing your App and Using Components to Display Data Chapter 3Using component data and methods
As Vue components are self-contained elements of your Vue app, they each have their own
data and functions. This helps when re-using components on the same page, as the
information is self-contained per instance of a component. methods and computed
functions are declared the same as you would on the Vue app, however, the data key
should be a function that returns an object.
The data object of a component must be a function. This is so that each
component has its own self-contained data, rather than getting confused
and sharing data between different instances of the same component. The
function must still return an object as you would in your Vue app.Create a new component called balance, add a data function and computed object to
your component and an empty
to the template property for now:
Vue.component('balance', {
template: '<div></div>',
data() {
return {
}
},
computed: {
}
});Next, add a key/value pair to your cost data object with an integer and add the variable to
your template. Add the
you should be presented with your integer:
Vue.component('balance', {
template: '<div>{{ cost }}</div>',
data() {
return {
cost: 1234
}
},
computed: {
}
});