How does a standard Vue component look?
Vue.component('blog-post', {
// camelCase in JavaScript
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
The basic documentation on components does not use the data object, only props. However, the data documentation mentions components:
Restriction: Only accepts Function when used in a component definition.
They even provide an example:
var data = { a: 1 }
// direct instance creation
var vm = new Vue({
data: data
})
vm.a // => 1
vm.$data === data // => true
// must use function when in Vue.extend()
var Component = Vue.extend({
data: function () {
return { a: 1 }
}
})
So, can a component have both data and props? Is data like a private property (in OOP terms) and props a public one?