Skip to content

Allow slot-scope to be set on the defining component #7740

@rightaway

Description

@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>

Activity

posva

posva commented on Mar 4, 2018

@posva
Member

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

yyx990803 commented on Mar 7, 2018

@yyx990803
Member

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

anselwong commented on Mar 8, 2018

@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

posva commented on Mar 8, 2018

@posva
Member

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

yyx990803 commented on Mar 8, 2018

@yyx990803
Member

@anselwong slot-scope requires 2.5

yyx990803

yyx990803 commented on Mar 8, 2018

@yyx990803
Member

@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

rightaway commented on Oct 2, 2018

@rightaway
Author

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

afontcu

afontcu commented on Oct 27, 2018

@afontcu
Member

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

Justineo commented on Feb 15, 2019

@Justineo
Member

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

dxyqqs commented on Apr 12, 2019

@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的时候,你们删除旧的插槽语法,上述的写法应该不再支持了吧?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @yyx990803@posva@Justineo@rightaway@dxyqqs

        Issue actions

          Allow slot-scope to be set on the defining component · Issue #7740 · vuejs/vue