lifecycle api: deprecate $addChild() in favor of `parent` option

src/api/child.js

@@ -1,20 +0,0 @@
-var _ = require('../util')
-
-/**
- * Create a child instance.
- *
- * @param {Object} opts
- * @param {Function} [BaseCtor]
- * @return {Vue}
- * @public
- */
-
-exports.$addChild = function (opts, BaseCtor) {
-  var ChildVue = BaseCtor || _.Vue
-  var parent = this
-  opts = opts || {}
-  opts._parent = parent
-  opts._root = parent.$root
-  var child = new ChildVue(opts)
-  return child
-}

src/directives/internal/component.js

@@ -174,6 +174,10 @@ module.exports = {
       var options = {
         el: templateParser.clone(this.el),
         template: this.inlineTemplate,
+        // make sure to add the child with correct parent
+        // if this is a transcluded component, its parent
+        // should be the transclusion host.
+        parent: this._host || this.vm,
         // if no inline-template, then the compiled
         // linker can be cached for better performance.
         _linkerCachable: !this.inlineTemplate,
@@ -201,8 +205,7 @@ module.exports = {
       if (extraOptions) {
         _.extend(options, extraOptions)
       }
-      var parent = this._host || this.vm
-      var child = parent.$addChild(options, this.Component)
+      var child = new this.Component(options)
       if (this.keepAlive) {
         this.cache[this.Component.cid] = child
       }

src/instance/init.js

@@ -16,8 +16,10 @@ exports._init = function (options) {
   options = options || {}
 
   this.$el = null
-  this.$parent = options._parent
-  this.$root = options._root || this
+  this.$parent = options.parent
+  this.$root = this.$parent
+    ? this.$parent.$root
+    : this
   this.$children = []
   this.$refs = {}       // child vm references
   this.$els = {}        // element references
@@ -49,7 +51,7 @@ exports._init = function (options) {
   // if this is a transcluded component, context
   // will be the common parent vm of this instance
   // and its host.
-  this._context = options._context || options._parent
+  this._context = options._context || this.$parent
 
   // scope:
   // if this is inside an inline v-for, the scope

src/vue.js

@@ -83,7 +83,6 @@ extend(p, require('./instance/misc'))
 extend(p, require('./api/data'))
 extend(p, require('./api/dom'))
 extend(p, require('./api/events'))
-extend(p, require('./api/child'))
 extend(p, require('./api/lifecycle'))
 
 Vue.version = '1.0.0-beta.3'

test/unit/specs/api/child_spec.js

@@ -1,26 +0,0 @@
-var Vue = require('../../../../src/vue')
-
-describe('Child API', function () {
-
-  var vm
-  beforeEach(function () {
-    vm = new Vue({
-      data: {
-        a: 1,
-        b: 1
-      },
-      directives: {
-        test: function () {}
-      }
-    })
-  })
-
-  it('default', function () {
-    var child = vm.$addChild()
-    expect(child instanceof Vue).toBe(true)
-    expect(child.a).toBeUndefined()
-    expect(child.$parent).toBe(vm)
-    expect(child.$root).toBe(vm)
-    expect(vm.$children.indexOf(child)).toBe(0)
-  })
-})

test/unit/specs/api/events_spec.js

@@ -59,9 +59,9 @@ describe('Events API', function () {
   })
 
   it('$broadcast', function () {
-    var child1 = vm.$addChild()
-    var child2 = vm.$addChild()
-    var child3 = child1.$addChild()
+    var child1 = new Vue({ parent: vm })
+    var child2 = new Vue({ parent: vm })
+    var child3 = new Vue({ parent: child1 })
     child1.$on('test', spy)
     child2.$on('test', spy)
     child3.$on('test', spy)
@@ -70,9 +70,9 @@ describe('Events API', function () {
   })
 
   it('$broadcast with propagation', function () {
-    var child1 = vm.$addChild()
-    var child2 = vm.$addChild()
-    var child3 = child1.$addChild()
+    var child1 = new Vue({ parent: vm })
+    var child2 = new Vue({ parent: vm })
+    var child3 = new Vue({ parent: child1 })
     child1.$on('test', function () {
       spy()
       return true
@@ -84,8 +84,8 @@ describe('Events API', function () {
   })
 
   it('$broadcast optimization', function () {
-    var child = vm.$addChild()
-    var child2 = child.$addChild()
+    var child = new Vue({ parent: vm })
+    var child2 = new Vue({ parent: child })
     // hooks should not incurr the bookkeeping cost
     child.$on('hook:created', function () {})
     expect(vm._eventsCount['hook:created']).toBeUndefined()
@@ -121,8 +121,8 @@ describe('Events API', function () {
   })
 
   it('$broadcast cancel', function () {
-    var child = vm.$addChild()
-    var child2 = child.$addChild()
+    var child = new Vue({ parent: vm })
+    var child2 = new Vue({ parent: child })
     child.$on('test', function () {
       return false
     })
@@ -132,8 +132,8 @@ describe('Events API', function () {
   })
 
   it('$dispatch', function () {
-    var child = vm.$addChild()
-    var child2 = child.$addChild()
+    var child = new Vue({ parent: vm })
+    var child2 = new Vue({ parent: child })
     child2.$on('test', spy)
     child.$on('test', spy)
     vm.$on('test', spy)
@@ -142,9 +142,9 @@ describe('Events API', function () {
   })
 
   it('$dispatch with propagation', function () {
-    var child = vm.$addChild()
-    var child2 = child.$addChild()
-    var child3 = child2.$addChild()
+    var child = new Vue({ parent: vm })
+    var child2 = new Vue({ parent: child })
+    var child3 = new Vue({ parent: child2 })
     child.$on('test', function () {
       spy()
       return true
@@ -155,8 +155,8 @@ describe('Events API', function () {
   })
 
   it('$dispatch cancel', function () {
-    var child = vm.$addChild()
-    var child2 = child.$addChild()
+    var child = new Vue({ parent: vm })
+    var child2 = new Vue({ parent: child })
     child.$on('test', function () {
       return false
     })

test/unit/specs/api/lifecycle_spec.js

@@ -196,8 +196,8 @@ if (_.inBrowser) {
 
       it('parent', function () {
         var parent = new Vue()
-        var child = parent.$addChild()
-        var child2 = parent.$addChild()
+        var child = new Vue({ parent: parent })
+        var child2 = new Vue({ parent: parent })
         expect(parent.$children.length).toBe(2)
         child.$destroy()
         expect(parent.$children.length).toBe(1)
@@ -207,7 +207,7 @@ if (_.inBrowser) {
 
       it('children', function () {
         var parent = new Vue()
-        var child = parent.$addChild()
+        var child = new Vue({ parent: parent })
         parent.$destroy()
         expect(child._isDestroyed).toBe(true)
       })

test/unit/specs/directives/public/on_spec.js

@@ -214,11 +214,12 @@ if (_.inBrowser) {
           test: test
         }
       })
-      parent.$addChild({
+      var child = new Vue({
         el: el,
-        template: '<a v-on:click="$parent.test($event)"></a>'
+        template: '<a v-on:click="$parent.test($event)"></a>',
+        parent: parent
       })
-      var e = trigger(el.firstChild, 'click')
+      var e = trigger(child.$el.firstChild, 'click')
       expect(test).toHaveBeenCalledWith(e)
     })
 

test/unit/specs/instance/events_spec.js

@@ -249,7 +249,8 @@ describe('Instance Events', function () {
           attached: spy,
           detached: spy2
         })
-        var childVm = parentVm.$addChild({
+        var childVm = new Vue({
+          parent: parentVm,
           el: childEl,
           attached: spy,
           detached: spy2
@@ -272,7 +273,8 @@ describe('Instance Events', function () {
           attached: spy,
           detached: spy2
         })
-        var childVm = parentVm.$addChild({
+        var childVm = new Vue({
+          parent: parentVm,
           el: childEl,
           attached: spy,
           detached: spy2
@@ -294,7 +296,8 @@ describe('Instance Events', function () {
           el: el,
           attached: spy
         })
-        var childVm = parentVm.$addChild({
+        var childVm = new Vue({
+          parent: parentVm,
           el: childEl,
           attached: spy
         })

test/unit/specs/transition/transition_spec.js

@@ -107,8 +107,9 @@ if (_.inBrowser && !_.isIE9) {
 
       it('skip vm with parent still being compiled', function () {
         el.__v_trans = new Transition(el, 'test', null, vm)
-        var child = vm.$addChild({
-          el: el
+        var child = new Vue({
+          el: el,
+          parent: vm
         })
         expect(child._isCompiled).toBe(true)
         transition.apply(el, 1, op, child, cb)

test/unit/specs/watcher_spec.js

@@ -129,7 +129,7 @@ describe('Watcher', function () {
     expect(watcher.value).toBeUndefined()
     expect(watcher2.value).toBeUndefined()
     // check $add should not affect isolated children
-    var child2 = vm.$addChild()
+    var child2 = new Vue({ parent: vm })
     var watcher3 = new Watcher(child2, 'd.e', spy)
     expect(watcher3.value).toBeUndefined()
     vm.$set('d', { e: 123 })