feat: warning for ambiguous v-slot usage

vuejs · Jan 23, 2019 · 8d84572 · 8d84572
1 parent 67e85de
commit 8d84572
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
diff --git a/src/compiler/parser/index.js b/src/compiler/parser/index.js
@@ -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 = {})

diff --git a/test/unit/features/component/component-scoped-slot.spec.js b/test/unit/features/component/component-scoped-slot.spec.js
@@ -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>
@@ -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>
@@ -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: `