ensure slot compilation order inside conditional fragments (fix vuejs…

…#1965)

src/compiler/compile.js

@@ -15,7 +15,8 @@ import {
  findRef,
  defineReactive,
  assertAsset,
- getAttr
+ getAttr,
+ hasBindAttr
 } from '../util/index'
 
 // special binding prefixes
@@ -514,6 +515,11 @@ function makeChildLinkFn (linkFns) {
 function checkElementDirectives (el, options) {
  var tag = el.tagName.toLowerCase()
  if (commonTagRE.test(tag)) return
+ // special case: give named slot a higher priority
+ // than unnamed slots
+ if (tag === 'slot' && hasBindAttr(el, 'name')) {
+ tag = '_namedSlot'
+ }
  var def = resolveAsset(options, 'elementDirectives', tag)
  if (def) {
  return makeTerminalNodeLinkFn(el, tag, '', options, def)

src/compiler/transclude.js

@@ -7,7 +7,8 @@ import {
  createAnchor,
  resolveAsset,
  toArray,
- addClass
+ addClass,
+ hasBindAttr
 } from '../util/index'
 
 const specialCharRE = /[^\w\-:\.]/
@@ -92,9 +93,7 @@ function transcludeTemplate (el, options) {
  // single nested component
  tag === 'component' ||
  resolveAsset(options, 'components', tag) ||
- replacer.hasAttribute('is') ||
- replacer.hasAttribute(':is') ||
- replacer.hasAttribute('v-bind:is') ||
+ hasBindAttr(replacer, 'is') ||
  // element directive
  resolveAsset(options, 'elementDirectives', tag) ||
  // for block

src/directives/element/index.js

@@ -1,7 +1,8 @@
-import slot from './slot'
+import { slot, namedSlot as _namedSlot } from './slot'
 import partial from './partial'
 
 export default {
  slot,
+ _namedSlot, // same as slot but with higher priority
  partial
 }

src/directives/element/slot.js

@@ -4,6 +4,7 @@ import {
 } from '../../parsers/template'
 
 import {
+ extend,
  extractContent,
  replace,
  remove,
@@ -15,60 +16,46 @@ import {
 // instance being stored as `$options._content` during
 // the transclude phase.
 
-export default {
+// We are exporting two versions, one for named and one
+// for unnamed, because the unnamed slots must be compiled
+// AFTER all named slots have selected their content. So
+// we need to give them different priorities in the compilation
+// process. (See #1965)
 
- priority: 1750,
+export const slot = {
 
- params: ['name'],
+ priority: 1750,
 
  bind () {
  var host = this.vm
  var raw = host.$options._content
- var content
  if (!raw) {
  this.fallback()
  return
  }
  var context = host._context
- var slotName = this.params.name
+ var slotName = this.params && this.params.name
  if (!slotName) {
- // Default content
- var self = this
- var compileDefaultContent = function () {
- var content = extractFragment(raw.childNodes, raw, true)
- if (content.hasChildNodes()) {
- self.compile(content, context, host)
- } else {
- self.fallback()
- }
- }
- if (!host._isCompiled) {
- // defer until the end of instance compilation,
- // because the default outlet must wait until all
- // other possible outlets with selectors have picked
- // out their contents.
- host.$once('hook:compiled', compileDefaultContent)
- } else {
- compileDefaultContent()
- }
+ // Default slot
+ this.tryCompile(extractFragment(raw.childNodes, raw, true), context, host)
  } else {
+ // Named slot
  var selector = '[slot="' + slotName + '"]'
  var nodes = raw.querySelectorAll(selector)
  if (nodes.length) {
- content = extractFragment(nodes, raw)
- if (content.hasChildNodes()) {
- this.compile(content, context, host)
- } else {
- this.fallback()
- }
+ this.tryCompile(extractFragment(nodes, raw), context, host)
  } else {
  this.fallback()
  }
  }
  },
 
- fallback () {
- this.compile(extractContent(this.el, true), this.vm)
+ tryCompile (content, context, host) {
+ if (content.hasChildNodes()) {
+ this.compile(content, context, host)
+ } else {
+ this.fallback()
+ }
  },
 
  compile (content, context, host) {
@@ -87,13 +74,22 @@ export default {
  }
  },
 
+ fallback () {
+ this.compile(extractContent(this.el, true), this.vm)
+ },
+
  unbind () {
  if (this.unlink) {
  this.unlink()
  }
  }
 }
 
+export const namedSlot = extend(extend({}, slot), {
+ priority: slot.priority + 1,
+ params: ['name']
+})
+
 /**
  * Extract qualified content nodes from a node list.
  *

src/util/dom.js

@@ -75,6 +75,20 @@ export function getBindAttr (node, name) {
  return val
 }
 
+/**
+ * Check the presence of a bind attribute.
+ *
+ * @param {Node} node
+ * @param {String} name
+ * @return {Boolean}
+ */
+
+export function hasBindAttr (node, name) {
+ return node.hasAttribute(name) ||
+ node.hasAttribute(':' + name) ||
+ node.hasAttribute('v-bind:' + name)
+}
+
 /**
  * Insert el before target
  *

test/unit/specs/directives/element/slot_spec.js

@@ -169,27 +169,28 @@ describe('Slot Distribution', function () {
  el: el,
  data: {
  a: 1,
+ b: 2,
  show: true
  },
- template: '<test :show="show">{{a}}</test>',
+ template: '<test :show="show"><p slot="b">{{b}}</a><p>{{a}}</p></test>',
  components: {
  test: {
  props: ['show'],
- template: '<div v-if="show"><slot></cotent></div>'
+ template: '<div v-if="show"><slot></slot><slot name="b"></slot></div>'
  }
  }
  })
- expect(el.textContent).toBe('1')
+ expect(el.textContent).toBe('12')
  vm.a = 2
  _.nextTick(function () {
- expect(el.textContent).toBe('2')
+ expect(el.textContent).toBe('22')
  vm.show = false
  _.nextTick(function () {
  expect(el.textContent).toBe('')
  vm.show = true
  vm.a = 3
  _.nextTick(function () {
- expect(el.textContent).toBe('3')
+ expect(el.textContent).toBe('32')
  done()
  })
  })