diff --git a/src/compiler/parser/index.js b/src/compiler/parser/index.js index 5bf124b4160..cf1c875de2a 100644 --- a/src/compiler/parser/index.js +++ b/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 --git a/test/unit/modules/compiler/parser.spec.js b/test/unit/modules/compiler/parser.spec.js index 32c1cc3580b..6642c63a13a 100644 --- a/test/unit/modules/compiler/parser.spec.js +++ b/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() + }) })