Improve the doc : components > slots

[darkylmnx]

Hi,

there's a blur area in the docs about slots, in the guide (not API), we are not directly aware that there's a "$slots" variable (or others) available in the component's scope.

It would be really helpful to now this, use case :
conditionnal rendering of slots TAG wrapper. If we do not now we have access to "$slots" in the templates, this cannot be acheived, this is very important to slots as, you don't want your consumer to add unecessary tags when using the slot, he just needs to put his content.

<script>
  export default {
    props: ['title']
  }
</script>

<template>
  <header class="app-header">
    <div v-if="$slots.left" class="btns btns-left">
      <slot name="left"></slot>
    </div>
    <h1 class="title">{{ title }}</h1>
    <div v-if="$slots.right" class="btns btns-right">
      <slot name="right"></slot>
    </div>
  </header>
</template>

Thank you

[mrcsmcln]

I'd also like to add slot list rendering:

Child.vue:

<template>
  <ul>
    <li v-for="name in Object.keys($slots)">
      <slot :name="name"></slot>
    </li>
  </ul>
</template>

Elsewhere:

<child>
  <p slot="items_0">Lorem ipsum dolor sit amet</div>
  <img slot="items_1" src="/images/1.png">
  <blockquote slot="items_2">Hello, World!</blockquote>
</child>

Produces:

<ul>
  <li>
    <p>Lorem ipsum dolor sit amet</div>
  </li>
  <li>
    <img src="/images/1.png">
  </li>
  <li>
    <blockquote>Hello, World!</blockquote>
  </li>
</ul>

[rubydesign]

I just stumbled across the same, ie that you can use :name for a slot, and thus define it's name through code.

My example is a sort-able table component. I used to have a render function per column (something i found on the net) but then i studied slots more and just tried the :name for fun, and it worked. Super cool.

Now clients of the component can overwrite how a table cell is rendered by supplying a slot, named after the column they want rendered (Column names are one of the component props)

The component is like this (just body as example):

%tbody
  %tr{"v-for": "row in filteredData"}
     %td{ "v-for": "id in column_order"}
        %slot{ ":name": "id" , "slot-scope": "row" , ":object": "row"}
          {{ row[id] }}

and using it, while rendering just the name column (with a link):

  %table-component{ ":columns": "basket_columns" ,
                    ":table_data": "filteredBasket",
                    ":column_order": "basket_order"}
    %template{ slot: "name" , "slot-scope" => "row"}
      %a{ ":href" => "'/products/' + row.object.product_id"}
         {{row.object.name}}

I would be happy to write something, but agree with #1230 . Should maybe go into advanced section or as a separate example (integrated into the grid-component example?). But even a sentence hint would be a start.