feat(parser): throw error when using interpolation instead of JS expression for slot names (vuejs#9038)

Author: kamilchlebek

Diff for: src/compiler/parser/index.js

@@ -454,6 +454,18 @@ function processOnce (el) {
 function processSlot (el) {
   if (el.tag === 'slot') {
     el.slotName = getBindingAttr(el, 'name')
+    // Fixes: #9038
+    if(process.env.NODE_ENV !== 'production'){
+      const slotName = el.attrsMap['name']
+      if(!dirRE.test(slotName) && parseText(slotName, delimiters)){
+        warn(
+          `name="${slotName}": ` +
+          'Interpolation inside attributes has been removed. ' +
+          'Use v-bind or the colon shorthand instead. For example, ' +
+          `instead of <slot name="{{ val }}">, use <slot :name="val">.`
+        )
+      }
+    }
     if (process.env.NODE_ENV !== 'production' && el.key) {
       warn(
         `\`key\` does not work on <slot> because slots are abstract outlets ` +

Diff for: test/unit/modules/compiler/parser.spec.js

@@ -737,4 +737,29 @@ describe('parser', () => {
     const ast = parse(`<p>{{\r\nmsg\r\n}}</p>`, baseOptions)
     expect(ast.children[0].expression).toBe('_s(msg)')
   })
+
+  // #9038
+  it('should warn if interpolation is used in slot name attribute', () => {
+    parse(`
+      <div class="wrapper">
+        <slot name="line-{{ index }}"></slot>
+      </div>`, baseOptions)
+
+    expect('name="line-{{ index }}": Interpolation inside attributes has been removed. ' +
+           'Use v-bind or the colon shorthand instead. ' +
+           'For example, instead of <slot name="{{ val }}">, use <slot :name="val">.')
+      .toHaveBeenWarned()
+  })
+
+  it('should not warn if interpolation is not used in slot name attribute', () => {
+    parse(`
+      <div class="wrapper">
+        <slot :name="'line-' + index"></slot>
+      </div>`, baseOptions)
+
+    expect('name="line-{{ index }}": Interpolation inside attributes has been removed. ' +
+      'Use v-bind or the colon shorthand instead. ' +
+      'For example, instead of <slot name="{{ val }}">, use <slot :name="val">.')
+      .not.toHaveBeenWarned()
+  })
 })