Quellcode durchsuchen

polish: warn against incorrect nested v-slot usage

Evan You vor 7 Jahren
Ursprung
Commit
3edb999200

+ 7 - 0
src/compiler/parser/index.js

@@ -642,6 +642,13 @@ function processSlotContent (el) {
               el
             )
           }
+          if (!maybeComponent(el.parent)) {
+            warn(
+              `<template v-slot> can only appear at the root level inside ` +
+              `the receiving the component`,
+              el
+            )
+          }
         }
         const { name, dynamic } = getSlotName(slotBinding)
         el.slotTarget = name

+ 14 - 0
test/unit/features/component/component-scoped-slot.spec.js

@@ -845,6 +845,20 @@ describe('Component scoped slot', () => {
         expect(vm.$el.innerHTML).toBe(`b from foo two `)
       }).then(done)
     })
+
+    it('warn when v-slot used on non-root <template>', () => {
+      const vm = new Vue({
+        template: `
+          <foo>
+            <template v-if="true">
+              <template v-slot:one>foo</template>
+            </template>
+          </foo>
+        `,
+        components: { Foo }
+      }).$mount()
+      expect(`<template v-slot> can only appear at the root level`).toHaveBeenWarned()
+    })
   })
 
   // 2.6 scoped slot perf optimization