slot插槽

1 、slot 基本用法

插槽指允许将自定义的组件像普通标签一样插入内容

import Vue from 'vue'
// 定义组件componentOne 
const compoentOne = {
template: `
  <div :style="style1">
      <slot></slot> // 定义插槽
  </div>
`,
data () {
  return {
      style1: {
          width: '200px',
          height: '200px'
          border: '1px solid #ccc'
      }
  }
}   
}
123456789101112131415161718
// 调用组件
new Vue({
components: {
  ComOne: componentOne 
},
el: '#id',
data () {
  return {
      val1: '123'
  }
},
template: `
  <div>
      <com-one>
          <span>{{val1}}</span> // 使用插槽
      </com-one>
  </div>
`
})
12345678910111213141516171819

2、具名插槽

给具体的插槽命名，并在使用的时候传入插槽的名称

import Vue from 'vue'

// 定义组件componentOne 
const compoentOne = {
template: `
  <div :style="style1">
      <div>
          <slot name="header"></slot> // 定义一个名称为header的插槽
      </div>
      <div>
          <slot name="body"></slot> // 定义一个名称为body的插槽
      </div>
  </div>
`,
data () {
  return {
      style1: {
          width: '200px',
          height: '200px'
          border: '1px solid #ccc'
      }
  }
}   
}
123456789101112131415161718192021222324
// 调用组件
new Vue({
components: {
  ComOne: componentOne 
},
el: '#id',
data () {
  return {
      val1: '123',
      val2: '456'
  }
},
template: `
  <div>
      <com-one>
          <span slot="header">{{val1}}</span> // 使用插槽'header**重点内容**'
          <span slot="body">{{val2}}</span> // 使用插槽'body'
      </com-one>
  </div>
`
})
123456789101112131415161718192021

3 、作用域插槽

将定义插槽的变量作用域到使用插槽中

import Vue from 'vue'

// 定义组件componentOne 
const compoentOne = {
template: `
  <div :style="style1">
      <slot :aa="val1" :bb="val2"></slot> // 给插槽传入变量
  </div>
`,
data () {
  return {
      style1: {
          width: '200px',
          height: '200px'
          border: '1px solid #ccc'
      },
      val1: 'slot1',
      val2: 'slot2'
  }
}   
}
123456789101112131415161718192021
// 调用组件
new Vue({
components: {
  ComOne: componentOne 
},
el: '#id',
data () {
  return {
      val1: '123'
  }
},
template: `
  <div>
      <com-one>
          <span slot-scope="props">{{props.aa}}{{props.bb}}{{val1}}</span> // 定义插槽传入的对象props,并使用
      </com-one>
  </div>
`
})
12345678910111213141516171819

vue2.6以后对具名插槽和作用域插槽做了修改，但任然没有废弃之前语法

4、具名插槽（2.6以后）

有时候我们希望在指定的位置输出我们的子元素，这时候具名插槽就排上了用场。

//组件调用时
<MyFooter>
<template v-slot:footer>
//这里v-slot：后边的值与组件内的slot的name属性对应，也就是插槽的名称。
<div>list</div>
</template>
</MyFooter>
//书写组件时
<template>
<div>
  {{age}}
  <div>
      <slot name='footer' />
      //这里name的值就是这个插槽的名称。
  </div>
</div>
</template>
1234567891011121314151617

最后我们会在我们想要的位置将我们的元素放置。

5、作用域插槽（vue2.6以后）

作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。

//组件调用
<ul>
<myli>
<template v-slot:footer="message">
 <div>{{message.aa}}</div>
</template>
</myli>
</ul>
//书写组件时
<template>
<li>
  <slot name='footer' :aa="title">
  </slot>
</li>
</template>
123456789101112131415

注意事项：

这里需要注意的是message是所有你绑定属性的集合，也就是你写的：aa=“title”会当做message的属性来实现。当然这里message可以换做其它的名称。

总结

v-slot的出现是为了代替原有的slot和slot-scope
简化了一些复杂的语法。
一句话概括就是v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射。