Skip to content

Commit

Permalink
feat: warning for ambiguous v-slot usage
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Jan 23, 2019
1 parent 67e85de commit 8d84572
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 5 deletions.
7 changes: 7 additions & 0 deletions src/compiler/parser/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -627,6 +627,13 @@ function processSlotContent (el) {
el
)
}
if (el.scopedSlots) {
warn(
`To avoid scope ambiguity, the default slot should also use ` +
`<template> syntax when there are other named slots.`,
slotBinding
)
}
}
// add the component's children to its default slot
const slots = el.scopedSlots || (el.scopedSlots = {})
Expand Down
29 changes: 24 additions & 5 deletions test/unit/features/component/component-scoped-slot.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -686,11 +686,13 @@ describe('Component scoped slot', () => {
expect(vm.$el.innerHTML.trim()).toBe(`from foo default | from bar | from baz`)
})

it('default + named slots', () => {
it('named slots', () => {
const vm = new Vue({
template: `
<foo #default="foo">
{{ foo }}
<foo>
<template ${toNamed(syntax, 'default')}="foo">
{{ foo }}
</template>
<template ${toNamed(syntax, 'one')}="one">
{{ one }}
</template>
Expand Down Expand Up @@ -748,8 +750,10 @@ describe('Component scoped slot', () => {
it('shorthand named slots', () => {
const vm = new Vue({
template: `
<foo #default="foo">
{{ foo }}
<foo>
<template #default="foo">
{{ foo }}
</template>
<template #one="one">
{{ one }}
</template>
Expand All @@ -763,6 +767,21 @@ describe('Component scoped slot', () => {
expect(vm.$el.innerHTML.replace(/\s+/g, ' ')).toMatch(`from foo default from foo one from foo two`)
})

it('should warn mixed root-default and named slots', () => {
const vm = new Vue({
template: `
<foo #default="foo">
{{ foo }}
<template #one="one">
{{ one }}
</template>
</foo>
`,
components: { Foo }
}).$mount()
expect(`default slot should also use <template>`).toHaveBeenWarned()
})

it('shorthand without scope variable', () => {
const vm = new Vue({
template: `
Expand Down

0 comments on commit 8d84572

Please sign in to comment.