Allow slot-scope to be set on the defining component

[rightaway]

What problem does this feature solve?

slot-scope can be set on a component that's a child of the component that defines the scoped slot.

<vue-parent>
  <vue-child slot-scope=props>
    {{ props.value }}
  </vue-child>
</vue-parent>

But it fails when it's set on the defining component itself. If there's only a default scoped slot then setting it on the parent should be allowed, because it would remove an unnecessary pair of tags in some cases and make the templates cleaner.

But mainly it's confusing and inconsistent to get an error that props isn't defined in the code below but not in the code above.

What does the proposed API look like?

<vue-parent slot-scope=props>
  <vue-child>
    {{ props.value }}
  </vue-child>
</vue-parent>

[posva]

This is not possible if the vue-parent component is used inside of another vue-parent component. Which one scope are we referring to? The first one or the second one?

<vue-parent>
<vue-parent slot-scope=props>
  <vue-child>
    {{ props.value }}
  </vue-child>
</vue-parent>
</vue-parent>

[yyx990803]

I feel the need for this, but the ambiguity pointed out by @posva is indeed a problem.

We probably need some form of special syntax to get rid of the ambiguity:

<foo slot-scope.self="{ msg }">
  {{ msg }}
</foo>

Or

<foo $slot-scope="{ msg }">
  {{ msg }}
</foo>

[anselwong]

It's confusing slot-scope not working but scope can ？ @yyx990803 大大你好，我使用文档介绍的slot-scope=“props”，会报props not defined，而偶然只使用scope="props"却可以正常得到想要的结果。 vue@2.4.4

[posva]

I'm not convinced about .self because slot-scope is not a directive. Is there something wrong with a different name like self-slot-scope (apart from looking different from slot-scope while doing the same thing)? $slot-scope is nice because it's short and relates clearly to slot-scope but I personally don't like the $ too much at the beginning because it has no semantical meaning 😆 thus, it doesn't read like most stuff does in Vue

[yyx990803]

@anselwong slot-scope requires 2.5

[yyx990803]

@posva that's true. Primary reason is that using self-slot-scope means it becomes a new reserved prop (i.e. user components can no longer use a prop with that name).

[rightaway]

+1 for self-slot-scope over $slot-scope.

[afontcu]

Hi! 👋 Is this in the v3 roadmap? I'm working on a collection of renderless components, and a self-slot-scope would really clean up my templates. I find myself adding more and more useless divs just to extract props from the scoped slot.

Thanks!!

[Justineo]

Since we've shipped a new v-slot syntax, this issue can be closed. See https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md.

[dxyqqs]

@yyx990803 您好，关于slot发现最新版本的Vue已经将$scopedSlots的值修改而没有在文档中提及。在代码中依赖this.$scopedSlots.default做判断的语法就会失效，理由是之前非作用域插槽的default并不会出现在$scopedSlots里面。 另外,关于低版本的插槽jsx语法如下：

slot

<tag>
  {this.$slot.default}
</tag>

slot-scope

// parent
<tag>
  {
    this.$scopedSlots.default({data})
  }
</tag>

// children
const scopedSlots = {
  scopedSlots:{
    default:scope=>(<span>{scope.data}</span>)
  }
}

<Parent {...scopedSlots}></Parent>

在Vue@3.x.x的时候,你们删除旧的插槽语法，上述的写法应该不再支持了吧？