vue插槽 slot与slot-scope v-slot

插槽

插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。

1. 单个插槽 | 默认插槽 | 匿名插槽
     首先是单个插槽，单个插槽是vue的官方叫法，但是其实也可以叫它默认插槽，或者与具名插槽相对，我们可以叫它匿名插槽。因为它不用设置name属性。

父组件
<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>

2. 具名插槽
     匿名插槽没有name属性，所以是匿名插槽，那么，插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次。出现在不同的位置。

父组件
<template>
    <div class="father">
        <h3>这里是父组件</h3>
        <child>
            <div class="tmpl" slot="menu">
              <span>菜单1</span>
              <span>菜单2</span>
              <span>菜单3</span>
              <span>菜单4</span>
              <span>菜单5</span>
              <span>菜单6</span>
            </div>
            <div class="tmpl" slot="menu2">
              <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 name="menu"></slot>
        <slot name="menu2"></slot>
    </div>
</template>

3. 作用域插槽 | 带数据的插槽
     可以绑定数据的插槽，显示内容完全由子组件决定，数据来自子组件。作用域插槽要求，在slot上面绑定数据。

父组件
// 父组件
<template>
  <div id="app">
    <child>
      <template slot-scope="scope">
        <p v-text="scope.item"></p>
      </template>
    </child>
  </div>
</template>
 
<script>
import child from './child';
export default {
  name: 'app',
  components: {
    child
  }
}
</script>

子组件
//子组件
<template>
  <div>
    <ul>
      <li v-for="(item,index) in items" :key="index">{{item}}
        <slot :item='item'></slot>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      items:['Webkit','Gecko','Trident','Blink']
    }
  }
}
</script>

v-slot的用法

   2.6版本之后的写法

1. 匿名插槽不变
2. 具名插槽写法 v-slot:menu 相当于name
3. 作用域插槽 v-slot:header=“scope” 相当于name=“header” slot-scope=“scope”

v-slot在使用时，需要在template标签内