Asked Aug 8th, 2017 9:24 AM 1084 0 1
  • 1084 0 1
+1

Scoped Slot trong Vue.js là gì và ứng của nó

Share
  • 1084 0 1

Trong phiên bản Vue.js 2.1.0 trở lên mình thấy có một chút thay đổi về Slot với việc giới thiệu Scoped Slot ngoài Single SlotNamed Slot. Mình muốn hỏi Scope Slot là gì và ứng dụng của nó trong các ứng dụng front-end thực tế.

Gần đây mình có sử dụng Vue InstantSearch package và thấy họ dùng Scoped Slot khá nhiều.

(thankyou)

Ken Minh @minhken207
Oct 1st, 4:54 AM

1 ANSWERS


Answered Aug 9th, 2017 2:44 AM
Accepted
+6

When using default slots feature, only fallback content can be passed from child component. In case slot content provided, it is being completely replaced. On the other hand, scoped slots allow to pass data from child component via attributes/props and that content may be used within template component, provided from parent component.

<!-- posts component (child) -->
<div class="post-items">
    <!-- child component iterates over post list and passes title and contents as slot scope -->
    <slot name="post"
          v-for="post in posts"
          :title="post.title"
          :contents="markdown(post.contents)">
    </slot>
</div>

<!-- index component (parent) -->
<div>
    <posts>
         <!-- parent component injects a template for each post. slot scope can be used via props object -->
         <template slot="post" scope="props">
              <article class="post-custom-template">
                  <h4>{{ props.title }}</h4>
                  <div>{{ props.contents }}</div>
              </article>
         </template>
    </posts>
</div>

<!-- search component (another parent) -->
<div>
    <posts>
         <!-- another parent component may provide different template while using the same logic of child component -->
         <template slot="post" scope="props">
              <div class="post-search-item">{{ props.title }}</div>
         </template>
    </posts>
</div>

The resulting output will contain posts list rendered using the template provided from parent components respectively

Share
Vinh Nguyen @vinhnguyen
Aug 9th, 2017 3:24 AM

Thank you for your answer! From your explanation, I guess scoped slot makes a regular slot be a reusable template so that we can override the template of child component with data explicitly passed from it.

Do we have any situations when we should use the scoped slot over other types of slot beside template override?

+1
| Reply
Share
Aug 9th, 2017 9:08 AM

@vinhnguyen Actually, default slots behave the same way: we override a part of template with custom content. Except scoped slots violate visibility and allow to bind variables from child component.

<!-- child -->
<div>
    <slot name="header"></slot>
    <slot name="contents" referrer="Jonh"></slot>
    <div>{{ outro }}</div>
</div>

<!-- parent -->
<div>
    <!-- parent -> child exchange via props -->
    <child :outro="Goodbye!">
         <!-- scope visibility is not violated: username is taken from parent component -->
         <h1 slot="header">Hello, {{ username }}</h1>
         <template slot="contents" scope="props">
              <!-- child -> parent exchange via scoped slot -->
              <!-- scope visibility overriden: props variable is taken from child component -->
              <p>You have been referred by {{ props.referrer }}</p>
         </template>
    </child>
</div>
+2
| Reply
Share
Vinh Nguyen @vinhnguyen
Aug 9th, 2017 9:49 AM

@Kinyakin thank you (bow)

+2
| Reply
Share