Vue: slot-scope support multiple parameters

Created on 10 Feb 2019  ·  6Comments  ·  Source: vuejs/vue

What problem does this feature solve?

slot-scope support multiple parameters in version 2.6.x.
It is supported in version 2.5.x.
If not supported, our component library(ant-design-vue) has to change some API.

What does the proposed API look like?

like 2.5.x

<template slot="name" slot-scope="text, record, index..."></template>
regression

Most helpful comment

I'm a bit torn on this. I will fix this because it worked in the past and I don't want to force you to re-design your API, but you really should avoid using this in the future, and possibly migrate away from it when you can.

The disadvantage compared to destructuring is:

  1. It's impossible to pass multiple parameters like this when using templates via <slot foo="bar"/>, and it's never been explicitly documented with an example - so it will confuse users who don't know about render functions.

  2. Users have to use the arguments in fixed order and cannot omit the ones they don't need. e.g. if you have a slot that passes in 5 arguments but the user actually only need the last 2 of them, they will have to declare all 5 just to use the last 2.

  3. If you switch back and forth between the two styles of usage it creates more inconsistency.

All 6 comments

Maybe we can change this code
https://github.com/vuejs/vue/blob/b2a093fa03704b2f0c6b2e9ee4d10b7ed156698d/src/core/vdom/helpers/normalize-scoped-slots.js#L46
to

let res = fn(arguments.length ? ...arguments : {})

mmh, why did you preferred that syntax over the drestructuring one? Is it browser support without using a transpiler?

@posva
A transpiler is required to support this syntax.
I think this is not a problem, babel will solve this.
Of course, other ways are fine. I just prefer this syntax. It makes me write a lot less characters.

Since this is a documented usage, I think this issue should be marked as a regression (I just did). And I created a working sandbox for 2.5.22.

I'm a bit torn on this. I will fix this because it worked in the past and I don't want to force you to re-design your API, but you really should avoid using this in the future, and possibly migrate away from it when you can.

The disadvantage compared to destructuring is:

  1. It's impossible to pass multiple parameters like this when using templates via <slot foo="bar"/>, and it's never been explicitly documented with an example - so it will confuse users who don't know about render functions.

  2. Users have to use the arguments in fixed order and cannot omit the ones they don't need. e.g. if you have a slot that passes in 5 arguments but the user actually only need the last 2 of them, they will have to declare all 5 just to use the last 2.

  3. If you switch back and forth between the two styles of usage it creates more inconsistency.

v-slot:[col.key]="text, record", and I really do not need 'text', text is in record object. and my editor is complaining

Was this page helpful?
0 / 5 - 0 ratings