Browse Source

change `id` option to `name` for constructor name.

Evan You 11 years ago
parent
commit
2a151f0646

+ 16 - 0
changes.md

@@ -125,6 +125,22 @@ By default, all child components **DO NOT** inherit the parent scope. Only anony
   // -> 2
   ```
 
+- #### new options: `name`.
+
+  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:
+
+  ``` js
+  var SubClass = Vue.extend({
+    name: 'MyComponent'
+  })
+  var instance = new SubClass()
+  console.log(instance) // -> MyComponent { $el: ... }
+  ```
+
+  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`.
+
+  This option is ignored as an instance option.
+
 - #### removed options:
 
   > Breaking

+ 2 - 2
src/api/global.js

@@ -27,7 +27,7 @@ var cid = 1
 exports.extend = function (extendOptions) {
   extendOptions = extendOptions || {}
   var Super = this
-  var Sub = createClass(extendOptions.id || 'VueComponent')
+  var Sub = createClass(extendOptions.name || 'VueComponent')
   Sub.prototype = Object.create(Super.prototype)
   Sub.prototype.constructor = Sub
   Sub.cid = cid++
@@ -123,7 +123,7 @@ function createAssetRegisters (Constructor) {
       return this.options.components[id]
     } else {
       if (_.isPlainObject(definition)) {
-        definition.id = id
+        definition.name = id
         definition = _.Vue.extend(definition)
       }
       this.options.components[id] = definition

+ 1 - 1
src/util/merge-option.js

@@ -183,7 +183,7 @@ function guardComponents (components) {
     for (var key in components) {
       def = components[key]
       if (_.isPlainObject(def)) {
-        def.id = key
+        def.name = key
         components[key] = _.Vue.extend(def)
       }
     }

+ 2 - 2
test/unit/specs/api/global_spec.js

@@ -12,7 +12,7 @@ describe('Global API', function () {
 
   it('extend', function () {
     var Test = Vue.extend({
-      id: 'test',
+      name: 'test',
       a: 1,
       b: 2
     })
@@ -83,7 +83,7 @@ describe('Global API', function () {
       expect(typeof component).toBe('function')
       expect(component.super).toBe(Vue)
       expect(component.options.a).toBe(1)
-      expect(component.options.id).toBe('test')
+      expect(component.options.name).toBe('test')
       expect(Test.component('test')).toBe(component)
       // already extended
       Test.component('test2', component)

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

@@ -141,7 +141,7 @@ describe('Util - Option merging', function () {
       }
     })
     expect(typeof res.components.a).toBe('function')
-    expect(res.components.a.options.id).toBe('a')
+    expect(res.components.a.options.name).toBe('a')
     expect(res.components.a.super).toBe(Vue)
   })