Skip to content

Commit 584e89d

Browse files
yyx990803yyx990803
committed
feat: support slot-props and its shorthand
See #9306 for more details.
1 parent 4f61d5b commit 584e89d

File tree

2 files changed

+179
-40
lines changed

2 files changed

+179
-40
lines changed

‎src/compiler/parser/index.js‎

Lines changed: 78 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ let postTransforms
4545
let platformIsPreTag
4646
let platformMustUseProp
4747
let platformGetTagNamespace
48+
let maybeComponent
4849

4950
export function createASTElement (
5051
tag: string,
@@ -74,6 +75,8 @@ export function parse (
7475
platformIsPreTag = options.isPreTag || no
7576
platformMustUseProp = options.mustUseProp || no
7677
platformGetTagNamespace = options.getTagNamespace || no
78+
const isReservedTag = options.isReservedTag || no
79+
maybeComponent = (el: ASTElement) => !!el.component || !isReservedTag(el.tag)
7780

7881
transforms = pluckModuleFunction(options.modules, 'transformNode')
7982
preTransforms = pluckModuleFunction(options.modules, 'preTransformNode')
@@ -390,7 +393,8 @@ export function processElement (
390393
)
391394

392395
processRef(element)
393-
processSlot(element)
396+
processSlotContent(element)
397+
processSlotOutlet(element)
394398
processComponent(element)
395399
for (let i = 0; i < transforms.length; i++) {
396400
element = transforms[i](element, options) || element
@@ -542,7 +546,79 @@ function processOnce (el) {
542546
}
543547
}
544548

545-
function processSlot (el) {
549+
// handle content being passed to a component as slot,
550+
// e.g. <template slot="xxx">, <div slot-scope="xxx">
551+
function processSlotContent (el) {
552+
let slotScope
553+
if (el.tag === 'template') {
554+
slotScope = getAndRemoveAttr(el, 'scope')
555+
/* istanbul ignore if */
556+
if (process.env.NODE_ENV !== 'production' && slotScope) {
557+
warn(
558+
`the "scope" attribute for scoped slots have been deprecated and ` +
559+
`replaced by "slot-scope" since 2.5. The new "slot-scope" attribute ` +
560+
`can also be used on plain elements in addition to <template> to ` +
561+
`denote scoped slots.`,
562+
el.rawAttrsMap['scope'],
563+
true
564+
)
565+
}
566+
el.slotScope = (
567+
slotScope ||
568+
getAndRemoveAttr(el, 'slot-scope') ||
569+
// new in 2.6: slot-props and its shorthand works the same as slot-scope
570+
// when used on <template> containers
571+
getAndRemoveAttr(el, 'slot-props') ||
572+
getAndRemoveAttr(el, '()')
573+
)
574+
} else if ((slotScope = getAndRemoveAttr(el, 'slot-scope'))) {
575+
/* istanbul ignore if */
576+
if (process.env.NODE_ENV !== 'production' && el.attrsMap['v-for']) {
577+
warn(
578+
`Ambiguous combined usage of slot-scope and v-for on <${el.tag}> ` +
579+
`(v-for takes higher priority). Use a wrapper <template> for the ` +
580+
`scoped slot to make it clearer.`,
581+
el.rawAttrsMap['slot-scope'],
582+
true
583+
)
584+
}
585+
el.slotScope = slotScope
586+
} else {
587+
// 2.6: slot-props on component, denotes default slot
588+
slotScope = getAndRemoveAttr(el, 'slot-props') || getAndRemoveAttr(el, '()')
589+
if (slotScope) {
590+
if (process.env.NODE_ENV !== 'production' && !maybeComponent(el)) {
591+
warn(
592+
`slot-props cannot be used on non-component elements.`,
593+
el.rawAttrsMap['slot-props'] || el.rawAttrsMap['()']
594+
)
595+
}
596+
// add the component's children to its default slot
597+
const slots = el.scopedSlots || (el.scopedSlots = {})
598+
const slotContainer = slots[`"default"`] = createASTElement('template', [], el)
599+
slotContainer.children = el.children
600+
slotContainer.slotScope = slotScope
601+
// remove children as they are returned from scopedSlots now
602+
el.children = []
603+
// mark el non-plain so data gets generated
604+
el.plain = false
605+
}
606+
}
607+
608+
// slot="xxx"
609+
const slotTarget = getBindingAttr(el, 'slot')
610+
if (slotTarget) {
611+
el.slotTarget = slotTarget === '""' ? '"default"' : slotTarget
612+
// preserve slot as an attribute for native shadow DOM compat
613+
// only for non-scoped slots.
614+
if (el.tag !== 'template' && !el.slotScope) {
615+
addAttr(el, 'slot', slotTarget, getRawBindingAttr(el, 'slot'))
616+
}
617+
}
618+
}
619+
620+
// handle <slot/> outlets
621+
function processSlotOutlet (el) {
546622
if (el.tag === 'slot') {
547623
el.slotName = getBindingAttr(el, 'name')
548624
if (process.env.NODE_ENV !== 'production' && el.key) {
@@ -553,44 +629,6 @@ function processSlot (el) {
553629
getRawBindingAttr(el, 'key')
554630
)
555631
}
556-
} else {
557-
let slotScope
558-
if (el.tag === 'template') {
559-
slotScope = getAndRemoveAttr(el, 'scope')
560-
/* istanbul ignore if */
561-
if (process.env.NODE_ENV !== 'production' && slotScope) {
562-
warn(
563-
`the "scope" attribute for scoped slots have been deprecated and ` +
564-
`replaced by "slot-scope" since 2.5. The new "slot-scope" attribute ` +
565-
`can also be used on plain elements in addition to <template> to ` +
566-
`denote scoped slots.`,
567-
el.rawAttrsMap['scope'],
568-
true
569-
)
570-
}
571-
el.slotScope = slotScope || getAndRemoveAttr(el, 'slot-scope')
572-
} else if ((slotScope = getAndRemoveAttr(el, 'slot-scope'))) {
573-
/* istanbul ignore if */
574-
if (process.env.NODE_ENV !== 'production' && el.attrsMap['v-for']) {
575-
warn(
576-
`Ambiguous combined usage of slot-scope and v-for on <${el.tag}> ` +
577-
`(v-for takes higher priority). Use a wrapper <template> for the ` +
578-
`scoped slot to make it clearer.`,
579-
el.rawAttrsMap['slot-scope'],
580-
true
581-
)
582-
}
583-
el.slotScope = slotScope
584-
}
585-
const slotTarget = getBindingAttr(el, 'slot')
586-
if (slotTarget) {
587-
el.slotTarget = slotTarget === '""' ? '"default"' : slotTarget
588-
// preserve slot as an attribute for native shadow DOM compat
589-
// only for non-scoped slots.
590-
if (el.tag !== 'template' && !el.slotScope) {
591-
addAttr(el, 'slot', slotTarget, getRawBindingAttr(el, 'slot'))
592-
}
593-
}
594632
}
595633
}
596634

‎test/unit/features/component/component-scoped-slot.spec.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -631,4 +631,105 @@ describe('Component scoped slot', () => {
631631
expect(vm.$el.innerHTML).toBe('<p>hello</p>')
632632
}).then(done)
633633
})
634+
635+
// new in 2.6
636+
describe('slot-props syntax', () => {
637+
const Foo = {
638+
render(h) {
639+
return h('div', [
640+
this.$scopedSlots.default && this.$scopedSlots.default('from foo default'),
641+
this.$scopedSlots.one && this.$scopedSlots.one('from foo one'),
642+
this.$scopedSlots.two && this.$scopedSlots.two('from foo two')
643+
])
644+
}
645+
}
646+
647+
const Bar = {
648+
render(h) {
649+
return this.$scopedSlots.default && this.$scopedSlots.default('from bar')[0]
650+
}
651+
}
652+
653+
const Baz = {
654+
render(h) {
655+
return this.$scopedSlots.default && this.$scopedSlots.default('from baz')[0]
656+
}
657+
}
658+
659+
function runSuite(syntax) {
660+
it('default slot', () => {
661+
const vm = new Vue({
662+
template: `<foo ${syntax}="foo">{{ foo }}<div>{{ foo }}</div></foo>`,
663+
components: { Foo }
664+
}).$mount()
665+
expect(vm.$el.innerHTML).toBe(`from foo default<div>from foo default</div>`)
666+
})
667+
668+
it('nested default slots', () => {
669+
const vm = new Vue({
670+
template: `
671+
<foo ${syntax}="foo">
672+
<bar ${syntax}="bar">
673+
<baz ${syntax}="baz">
674+
{{ foo }} | {{ bar }} | {{ baz }}
675+
</baz>
676+
</bar>
677+
</foo>
678+
`,
679+
components: { Foo, Bar, Baz }
680+
}).$mount()
681+
expect(vm.$el.innerHTML.trim()).toBe(`from foo default | from bar | from baz`)
682+
})
683+
684+
it('default + named slots', () => {
685+
const vm = new Vue({
686+
template: `
687+
<foo ()="foo">
688+
{{ foo }}
689+
<template slot="one" ${syntax}="one">
690+
{{ one }}
691+
</template>
692+
<template slot="two" ${syntax}="two">
693+
{{ two }}
694+
</template>
695+
</foo>
696+
`,
697+
components: { Foo }
698+
}).$mount()
699+
expect(vm.$el.innerHTML.replace(/\s+/g, ' ')).toMatch(`from foo default from foo one from foo two`)
700+
})
701+
702+
it('nested + named + default slots', () => {
703+
const vm = new Vue({
704+
template: `
705+
<foo>
706+
<template slot="one" ${syntax}="one">
707+
<bar ${syntax}="bar">
708+
{{ one }} {{ bar }}
709+
</bar>
710+
</template>
711+
<template slot="two" ${syntax}="two">
712+
<baz ${syntax}="baz">
713+
{{ two }} {{ baz }}
714+
</baz>
715+
</template>
716+
</foo>
717+
`,
718+
components: { Foo, Bar, Baz }
719+
}).$mount()
720+
expect(vm.$el.innerHTML.replace(/\s+/g, ' ')).toMatch(`from foo one from bar from foo two from baz`)
721+
})
722+
723+
it('should warn slot-props usage on non-component elements', () => {
724+
const vm = new Vue({
725+
template: `<div ${syntax}="foo"/>`
726+
}).$mount()
727+
expect(`slot-props cannot be used on non-component elements`).toHaveBeenWarned()
728+
})
729+
}
730+
731+
// run tests for both full syntax and shorthand
732+
runSuite('slot-props')
733+
runSuite('()')
734+
})
634735
})

0 commit comments

Comments
 (0)