Description
I have read both the "API guide" on Vue.extend and the "Extending Vue" portion which talks about it, but I think the concept of extending components is more powerful than what it currently seems after you read the docs.
For example I am in a situation where I would want to have a hierarchy of related components:
var userTemplate = '<h3>User Profile</h3>' + '<p>{{firstName}}</p>'
var User = Vue.extend({
name: 'UserCard',
el: function() {
return document.createElement('div')
},
template: userTemplate,
methods: {
login: function() {
console.log('Logging in user: ' + this.firstName)
}
},
ready: function() {
this.login()
}
})
var Student = User.extend({
name: 'StudentCard',
template: userTemplate + '<p>Student ID: {{studentId}}</p>'
})
var Gardener = User.extend({
name: 'GardenerCard',
data: function() {
return {
accessRights: [ 'open', 'close' ]
}
},
template: userTemplate +
'Can access: <ul>' +
'<li v-repeat="accessRights">{{$value}}</li>' +
'</ul>'
})
var user = new User({
data: {
firstName: 'Agon'
}
}).$appendTo('#user')
var student = new Student({
data: {
firstName: 'Agon the student',
studentId: 5
}
}).$appendTo('#student')
var gardener = new Gardener({
data: {
firstName: 'Agon the gardener'
}
}).$appendTo('#gardener')The example above works very well, but I am not quite sure if there might be some sort of unexpected behaviors because of how the chain of extending works?
A list of which properties can be "extended", dos and don'ts, pros and cons and any other information that doesn't seem so obvious on extending from a custom component to another custom component would certainly be very useful to have either in the "Extending Vue" portion or the API Guide itself :)