directives on a component written in its parent template should be compiled in the parent scope

Author: yyx990803

src/compile/compile.js

@@ -415,6 +415,16 @@ function checkTerminalDirectives (el, options) {
 function makeTeriminalLinkFn (el, dirName, value, options) {
   var descriptor = dirParser.parse(value)[0]
   var def = options.directives[dirName]
+  // special case: we need to collect directives found
+  // on a component root node, but defined in the parent
+  // template. These directives need to be compiled in
+  // the parent scope.
+  if (dirName === 'component') {
+    var dirs = collectDirectives(el, options, true)
+    el._parentLinker = dirs.length
+      ? makeDirectivesLinkFn(dirs)
+      : null
+  }
   var terminalLinkFn = function (vm, el) {
     vm._bindDir(dirName, el, descriptor, def)
   }
@@ -427,10 +437,11 @@ function makeTeriminalLinkFn (el, dirName, value, options) {
  *
  * @param {Element} el
  * @param {Object} options
+ * @param {Boolean} asParent
  * @return {Array}
  */
 
-function collectDirectives (el, options) {
+function collectDirectives (el, options, asParent) {
   var attrs = _.toArray(el.attributes)
   var i = attrs.length
   var dirs = []
@@ -440,6 +451,12 @@ function collectDirectives (el, options) {
     attrName = attr.name
     if (attrName.indexOf(config.prefix) === 0) {
       dirName = attrName.slice(config.prefix.length)
+      if (
+        asParent &&
+        (dirName === 'with' || dirName === 'ref')
+      ) {
+        continue
+      }
       dirDef = options.directives[dirName]
       _.assertAsset(dirDef, 'directive', dirName)
       if (dirDef) {

src/directives/component.js

@@ -22,6 +22,8 @@ module.exports = {
       _.replace(this.el, this.ref)
       // check keep-alive options
       this.checkKeepAlive()
+      // check parent directives
+      this.parentLinker = this.el._parentLinker
       // if static, build right now.
       if (!this._isDynamicLiteral) {
         this.resolveCtor(this.expression)
@@ -71,17 +73,26 @@ module.exports = {
 
   build: function () {
     if (this.keepAlive) {
-      var vm = this.cache[this.ctorId]
-      if (vm) {
-        this.childVM = vm
-        vm.$before(this.ref)
+      var cached = this.cache[this.ctorId]
+      if (cached) {
+        this.childVM = cached
+        cached.$before(this.ref)
         return
       }
     }
+    var vm = this.vm
     if (this.Ctor && !this.childVM) {
-      this.childVM = this.vm.$addChild({
+      this.childVM = vm.$addChild({
         el: templateParser.clone(this.el)
       }, this.Ctor)
+      if (this.parentLinker) {
+        var dirCount = vm._directives.length
+        var targetVM = this.childVM.$options.inherit
+          ? this.childVM
+          : vm
+        this.parentLinker(targetVM, this.childVM.$el)
+        this.parentDirs = vm._directives.slice(dirCount)
+      }
       if (this.keepAlive) {
         this.cache[this.ctorId] = this.childVM
       }
@@ -106,6 +117,12 @@ module.exports = {
       }
     } else {
       this.childVM.$destroy(remove)
+      if (this.parentDirs) {
+        var i = this.parentDirs.length
+        while (i--) {
+          this.parentDirs[i]._teardown()
+        }
+      }
     }
     this.childVM = null
   },

test/unit/specs/directives/component_spec.js

@@ -134,6 +134,23 @@ if (_.inBrowser) {
       })
     })
 
+    it('should compile parent template directives in parent scope', function (done) {
+      var vm = new Vue({
+        el: el,
+        data: { ok: false },
+        template: '<div v-component="test" v-show="ok"></div>',
+        components: {
+          test: {}
+        }
+      })
+      expect(el.firstChild.style.display).toBe('none')
+      vm.ok = true
+      _.nextTick(function () {
+        expect(el.firstChild.style.display).toBe('')
+        done()
+      })
+    })
+
     it('teardown', function () {
       var vm = new Vue({
         el: el,