fix: restore slot-scope + v-if behavior

fix #9422
This commit is contained in:
Evan You 2019-02-04 22:39:35 -05:00
parent 0129b0eb12
commit 44a4ca33b9
3 changed files with 33 additions and 4 deletions

View File

@ -375,7 +375,8 @@ function genScopedSlot (
el: ASTElement, el: ASTElement,
state: CodegenState state: CodegenState
): string { ): string {
if (el.if && !el.ifProcessed) { const isLegacySyntax = el.attrsMap['slot-scope']
if (el.if && !el.ifProcessed && !isLegacySyntax) {
return genIf(el, state, genScopedSlot, `null`) return genIf(el, state, genScopedSlot, `null`)
} }
if (el.for && !el.forProcessed) { if (el.for && !el.forProcessed) {
@ -383,7 +384,9 @@ function genScopedSlot (
} }
const fn = `function(${String(el.slotScope)}){` + const fn = `function(${String(el.slotScope)}){` +
`return ${el.tag === 'template' `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) : genElement(el, state)
}}` }}`
return `{key:${el.slotTarget || `"default"`},fn:${fn}}` return `{key:${el.slotTarget || `"default"`},fn:${fn}}`

View File

@ -650,6 +650,25 @@ describe('Component scoped slot', () => {
}).then(done) }).then(done)
}) })
// #9422
// the behavior of the new syntax is slightly different.
it('scoped slot v-if using slot-scope value', () => {
const Child = {
template: '<div><slot value="foo"/></div>',
}
const vm = new Vue({
components: { Child },
template: `
<child>
<template slot-scope="{ value }" v-if="value">
foo {{ value }}
</template>
</child>
`
}).$mount()
expect(vm.$el.textContent).toMatch(`foo foo`)
})
// 2.6 new slot syntax // 2.6 new slot syntax
describe('v-slot syntax', () => { describe('v-slot syntax', () => {
const Foo = { const Foo = {

View File

@ -239,11 +239,18 @@ describe('codegen', () => {
it('generate scoped slot with multiline v-if', () => { it('generate scoped slot with multiline v-if', () => {
assertCodegen( assertCodegen(
'<foo><template v-if="\nshow\n" slot-scope="bar">{{ bar }}</template></foo>', '<foo><template v-if="\nshow\n" slot-scope="bar">{{ bar }}</template></foo>',
`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( assertCodegen(
'<foo><div v-if="\nshow\n" slot="foo" slot-scope="bar">{{ bar }}</div></foo>', '<foo><div v-if="\nshow\n" slot="foo" slot-scope="bar">{{ bar }}</div></foo>',
`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(
'<foo><template v-if="show" #default="bar">{{ bar }}</template></foo>',
`with(this){return _c('foo',{scopedSlots:_u([(show)?{key:"default",fn:function(bar){return [_v(_s(bar))]}}:null],true)})}`
) )
}) })