vue slot -slot

Slot, which is slot, is a component of HTML template, this template is not displayed, and how the display is determined by the parent component.
Because the slot is a template, so, for any one component, from the perspective of the type of template points, in fact, it can be divided into non-template slots and slot template into two categories. Non-slot template is an html template, such as 'the DIV, span, UL, table' these, a non-displaying and hiding the template slots and how to display itself by a control assembly; slot is a slot template, which is a shell son, because it's the last show and hide as well as what kind of HTML template display control by the parent component. But the position is determined by the slot display has its own sub-assemblies, components trough write what position the template, template parent component pass over the future of what is displayed in the position.

Slots into a single slot, the default slot and three slots Anonymous

1, a single slot

单个插槽的英文VUE的官方叫法，但是其实也可以叫它默认插槽，或者与具名插槽相对，我们可以叫它匿名插槽。
因为它不用设置名称属性。单个插槽可以放置在组件的任意位置，但是就像它的名字一样，一个组件中只能有一
个该类插槽。相对应的，具名插槽就可以有很多个，只要名字（名称属性）不同就可以了。`

//父组件
	
<template>
    <div class="father">
        <h3>这里是父组件</h3>
        <child>
            <div class="tmpl">
              <span>菜单1</span>
              <span>菜单2</span>
              <span>菜单3</span>
              <span>菜单4</span>
              <span>菜单5</span>
              <span>菜单6</span>
            </div>
        </child>
    </div>
</template>

	//子组件
	
	<template>
	    <div class="child">
	        <h3>这里是子组件</h3>
	        <slot></slot>
	    </div>
	</template>
/*
在这个例子里，因为父组件在里面写了HTML模板，那么子组件的匿名来自插槽这块模板就是下面这样。
也就是说，子组件的匿名插槽被使用了，是被下面这块模板使用了。
*/


<div class="tmpl">
  <span>菜单1</span>
  <span>菜单2</span>
  <span>菜单3</span>
  <span>菜单4</span>
  <span>菜单5</span>
  <span>菜单6</span>
</div>

2. The slot named and anonymous slot

Anonymous slot without a name attribute, it is anonymous slots, then slots plus the name of the property, it becomes a named slot. Named slots can appear in one component Ñ times, appear in different locations. The following example, one is named, there are two slots adverbial clause: a single component slot, three slots are a parent component with the same set of CSS style shows up, the difference is slightly different content.

//父组件

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child>
      <div class="tmpl" slot="up">
        <span>菜单1</span>
        <span>菜单2</span>
        <span>菜单3</span>
        <span>菜单4</span>
        <span>菜单5</span>
        <span>菜单6</span>
      </div>
      <div class="tmpl" slot="down">
        <span>菜单-1</span>
        <span>菜单-2</span>
        <span>菜单-3</span>
        <span>菜单-4</span>
        <span>菜单-5</span>
        <span>菜单-6</span>
      </div>
      <div class="tmpl">
        <span>菜单->1</span>
        <span>菜单->2</span>
        <span>菜单->3</span>
        <span>菜单->4</span>
        <span>菜单->5</span>
        <span>菜单->6</span>
      </div>
    </child>
  </div>
</template>
//子组件


<template>
  <div class="child">
    // 具名插槽
    <slot name="up"></slot>
    <h3>这里是子组件</h3>
    // 具名插槽
    <slot name="down"></slot>
    // 匿名插槽
    <slot></slot>
  </div>
</template>

3. Scope slots | slots with data

作用域插槽要求，在槽上面绑定数据。

<slot name="up" :data="data"></slot>
 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    },
}