diff --git a/src/compiler/codegen/index.js b/src/compiler/codegen/index.js index c0038a1f..04be3fb1 100644 --- a/src/compiler/codegen/index.js +++ b/src/compiler/codegen/index.js @@ -375,7 +375,8 @@ function genScopedSlot ( el: ASTElement, state: CodegenState ): string { - if (el.if && !el.ifProcessed) { + const isLegacySyntax = el.attrsMap['slot-scope'] + if (el.if && !el.ifProcessed && !isLegacySyntax) { return genIf(el, state, genScopedSlot, `null`) } if (el.for && !el.forProcessed) { @@ -383,7 +384,9 @@ function genScopedSlot ( } const fn = `function(${String(el.slotScope)}){` + `return ${el.tag === 'template' - ? genChildren(el, state) || 'undefined' + ? el.if && isLegacySyntax + ? `(${el.if})?${genChildren(el, state) || 'undefined'}:undefined` + : genChildren(el, state) || 'undefined' : genElement(el, state) }}` return `{key:${el.slotTarget || `"default"`},fn:${fn}}` diff --git a/test/unit/features/component/component-scoped-slot.spec.js b/test/unit/features/component/component-scoped-slot.spec.js index 7c6caf26..5141d9b1 100644 --- a/test/unit/features/component/component-scoped-slot.spec.js +++ b/test/unit/features/component/component-scoped-slot.spec.js @@ -650,6 +650,25 @@ describe('Component scoped slot', () => { }).then(done) }) + // #9422 + // the behavior of the new syntax is slightly different. + it('scoped slot v-if using slot-scope value', () => { + const Child = { + template: '
', + } + const vm = new Vue({ + components: { Child }, + template: ` + + + + ` + }).$mount() + expect(vm.$el.textContent).toMatch(`foo foo`) + }) + // 2.6 new slot syntax describe('v-slot syntax', () => { const Foo = { diff --git a/test/unit/modules/compiler/codegen.spec.js b/test/unit/modules/compiler/codegen.spec.js index 083a736f..cb96e714 100644 --- a/test/unit/modules/compiler/codegen.spec.js +++ b/test/unit/modules/compiler/codegen.spec.js @@ -239,11 +239,18 @@ describe('codegen', () => { it('generate scoped slot with multiline v-if', () => { assertCodegen( '', - `with(this){return _c('foo',{scopedSlots:_u([(\nshow\n)?{key:"default",fn:function(bar){return [_v(_s(bar))]}}:null],true)})}` + `with(this){return _c('foo',{scopedSlots:_u([{key:"default",fn:function(bar){return (\nshow\n)?[_v(_s(bar))]:undefined}}],true)})}` ) assertCodegen( '
{{ bar }}
', - `with(this){return _c(\'foo\',{scopedSlots:_u([(\nshow\n)?{key:"foo",fn:function(bar){return _c(\'div\',{},[_v(_s(bar))])}}:null],true)})}` + `with(this){return _c(\'foo\',{scopedSlots:_u([{key:"foo",fn:function(bar){return (\nshow\n)?_c(\'div\',{},[_v(_s(bar))]):_e()}}],true)})}` + ) + }) + + it('generate scoped slot with new slot syntax', () => { + assertCodegen( + '', + `with(this){return _c('foo',{scopedSlots:_u([(show)?{key:"default",fn:function(bar){return [_v(_s(bar))]}}:null],true)})}` ) })