Skip to content

Commit 2a151f0

Browse files
committed
change id option to name for constructor name.
1 parent bcb8944 commit 2a151f0

File tree

5 files changed

+22
-6
lines changed

5 files changed

+22
-6
lines changed

changes.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,22 @@ By default, all child components **DO NOT** inherit the parent scope. Only anony
125125
// -> 2
126126
```
127127

128+
- #### new options: `name`.
129+
130+
This option, when used with `Vue.extend`, gives your returned constructor a more descriptive name rather than the generic `VueComponent`. This makes debugging easier when you log instances in the console. For example:
131+
132+
``` js
133+
var SubClass = Vue.extend({
134+
name: 'MyComponent'
135+
})
136+
var instance = new SubClass()
137+
console.log(instance) // -> MyComponent { $el: ... }
138+
```
139+
140+
When you use `Vue.component`, the component ID is automatically camelized and used as the constructor name, so `"my-component"` will have a constructor name of `MyComponent`.
141+
142+
This option is ignored as an instance option.
143+
128144
- #### removed options:
129145

130146
> Breaking

src/api/global.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ var cid = 1
2727
exports.extend = function (extendOptions) {
2828
extendOptions = extendOptions || {}
2929
var Super = this
30-
var Sub = createClass(extendOptions.id || 'VueComponent')
30+
var Sub = createClass(extendOptions.name || 'VueComponent')
3131
Sub.prototype = Object.create(Super.prototype)
3232
Sub.prototype.constructor = Sub
3333
Sub.cid = cid++
@@ -123,7 +123,7 @@ function createAssetRegisters (Constructor) {
123123
return this.options.components[id]
124124
} else {
125125
if (_.isPlainObject(definition)) {
126-
definition.id = id
126+
definition.name = id
127127
definition = _.Vue.extend(definition)
128128
}
129129
this.options.components[id] = definition

src/util/merge-option.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ function guardComponents (components) {
183183
for (var key in components) {
184184
def = components[key]
185185
if (_.isPlainObject(def)) {
186-
def.id = key
186+
def.name = key
187187
components[key] = _.Vue.extend(def)
188188
}
189189
}

test/unit/specs/api/global_spec.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('Global API', function () {
1212

1313
it('extend', function () {
1414
var Test = Vue.extend({
15-
id: 'test',
15+
name: 'test',
1616
a: 1,
1717
b: 2
1818
})
@@ -83,7 +83,7 @@ describe('Global API', function () {
8383
expect(typeof component).toBe('function')
8484
expect(component.super).toBe(Vue)
8585
expect(component.options.a).toBe(1)
86-
expect(component.options.id).toBe('test')
86+
expect(component.options.name).toBe('test')
8787
expect(Test.component('test')).toBe(component)
8888
// already extended
8989
Test.component('test2', component)

test/unit/specs/util/merge-option_spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ describe('Util - Option merging', function () {
141141
}
142142
})
143143
expect(typeof res.components.a).toBe('function')
144-
expect(res.components.a.options.id).toBe('a')
144+
expect(res.components.a.options.name).toBe('a')
145145
expect(res.components.a.super).toBe(Vue)
146146
})
147147

0 commit comments

Comments
 (0)