Vue.js slot插槽

1.插槽的基本用法

• 组件的插槽允许用户将其他组件或者html片段插入到组件当中

// App.vue
<template>
  <div id="app">
    <Child>
      <!-- 在子组件中插入标签 -->
      <h2>我是插入的h2</h2>
    </Child>
  </div>
</template>

• 子组件需要一个slot来接收父组件传入的组件或者html片段

// 子组件
<template>
    <div id="child">
<!-- slot标签将被插入的标签替代 -->
        <slot></slot>
        <h2>我是Hello组件</h2>
    </div>
</template>

渲染结果：

<div id="app">
    <div id="child">
        <h2>我是插入的h2</h2>
        <h2>我是Child组件</h2>
    </div>
</div>

这种插槽只有一个，被称为匿名插槽。

2.具名插槽

• 如果子组件有多个插槽，就需要为每个插槽添加一个标识，即name属性,方便对号入座

<template>
    <div id="child">
        <slot name="top"></slot>
        <h2>我是Child组件</h2>
        <slot name="bottom"></slot>
    </div>
</template>

• 父组件插入标签时 通过设定slot属性值，来关联对应的插槽

<template>
  <div id="app">
    <Child>
      <!-- 在子组件中插入标签 -->
      <h2 slot="top">我是插入的h2</h2>
      <h5 slot="bottom">我是插入的h5</h5>
    </Child>
  </div>
</template>

渲染结果：

<div id="app">
    <div id="child">
        <h2>我是插入的h2</h2>
        <h2>我是Child组件</h2>
        <h5>我是插入的h5</h5>
    </div>
</div>

3.插槽的默认内容

• slot标签内可以写html代码，如果这个插槽没有被替换，会显示该插槽内的html内容，反之会被替换

<template>
    <div id="child">
        <slot name="top">
          <p>我是top插槽没使用的时候展示的内容</p>
        </slot>
        <h2>我是Child组件</h2>
        <slot name="bottom"></slot>
    </div>
</template>

// App.vue
<template>
  <div id="app">
    <Child>
      <h5 slot="bottom">我是插入的h5</h5>
    </Child>
  </div>
</template>

渲染结果:

<div id="app">
    <div id="child">
        <p>我是top插槽没使用的时候展示的内容</p>
        <h2>我是Child组件</h2>
        <h5>我是插入的h5</h5>
    </div>
</div>

5.slot-scope（作用域插槽）

• 这个功能通用来为slot标签绑定数据，通常一个组件渲染数据有默认的样式，如果用户不满意，可以提供插槽，并绑定相关数据，使用户可以拿到之前的数据并用自己的方式渲染

// 子组件
<template>
    <div id="child">
 <!-- 在slot标签中2个数据 -->
        <slot name="top" :p1="p1" :p2="p2">
            <h3>{{p1.name}}</h3>
            <h3>{{p1.age}}岁</h3>
            <h3>{{p2.name}}</h3>
            <h3>{{p2.age}}岁</h3>
        </slot>
        <h2>我是Hello组件</h2>
        <slot name="bottom"></slot>
    </div>
</template>

<script>
export default {
  data () {
    return {
      p1: {name: '乔治',age: 4},
      p2 :{name: '佩琪',age: 8}
    }
  }
}
</script>

• 父组件在替代slot的标签中添加 slot-scope属性，表示接受当前slot绑定的数据。因为slot标签上可能绑定了多个数据，所以vue将所有的数据都包裹在一个对象内，可以通过这个对象的属性名来访问对应的数据。

// App.vue
<template>
  <div id="app">
    <Hello>
      <template slot-scope="{p1,p2}" slot="top">
        <p>{{p1.name}}</p>
        <p>{{p1.age}}岁</p>
        <p>{{p2.name}}</p>
        <p>{{p2.age}}岁</p>
      </template>
      <h5 slot="bottom">我是插入的h5</h5>
    </Hello>
  </div>
</template>

6.新的插槽语法(2.6.0)

• 从2.6.0版本起，使用v-slot:插槽名来代替slot=插槽名,且标签模版需要用template包起来
• v-slot指令的值可以用来接收插槽绑定的数据
• v-slot:插槽名可以简写成#插槽名

<child>
   <template v-slot:top="{cname,age}">
         <h1>{{cname}} - {{age}}</h1>
   </template>
   <template #:bottom="{cname,age}">
         <h1>{{cname}} - {{age}}</h1>
   </template>
</child>