vue插槽详解

       vue中的所有功能特性，slot相对算是一个比较抽象一点的功能（可能只有我这么认为吧，嘿嘿），下面我们一起仔细过一遍slot插槽这个功能。另外我们需要注意的是从vue2.6.0版本开始，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope ，官网并明确提出，废除的特性将不会出现在vue3.0的版本中。所以我们将分为两部分来介绍slot插槽这个特性，一个是老版本另外一个是2.6.0提出来的指令类型的版本。

      在介绍特性之前，我们先了解一下slot插槽这个特性到底有什么作用，官网中是这么说的：Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。也即是slot是用来实现分发内容的，通俗一点：slot是在父组建控制子组件显示或隐藏相关内容，例如下面代码中，如果child子组件没有写slot标签，那么a11这个文本将会被忽略。

Vue.component('child', {
  template: '<div><slot></slot></div>'
})

new Vue({
  el: '#app',
  template: '<div><child>a11</child></div>'
})

那有人可能会问，内容具体有哪些？可以是text文本，可以是html，也可以是component。下面我将把对应的代码分别列出来。

1.将废弃的版本slot特性；

    1.默认插槽：有时候我们可能会用到一些数据，需要注意的是，父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的，如下代码所示，父组建中不能取到user.name,子组件中不能取到user.firstName

Vue.component('child', {
  template: '<div><slot></slot>{{ "_" +  user.firstName }}</div>',
  data: function(){
    return{
      user: { firstName: 'liu' }
    }
  }
})

new Vue({
  el: '#app',
  template: '<div><child>{{ user.name }}</child></div>',
  data: function(){
    return {
      user: { name: 'jerry' }
    }
  }
})

   2.具名插槽：在template上使用特殊的slot的属性，从而将内容父组件传给子组件。代码如下所示：

//具名插槽
Vue.component('child', {
  template:'<template><div><slot name="test-slot"></slot><h1><slot name="test-slot-1"></slot></h1></div></template>'
})

new Vue({
  el: '#app',
  template: '<child><template slot="test-slot">This is test-slot! </template><template slot="test-slot-1">This is test-slot-1!</template></child>',
})

   下过如下图所示：

或者slot可以直接作用到普通元素上，代码如下：

//具名插槽
Vue.component('child', {
  template:'<template><div><slot name="test-slot"></slot><h1><slot name="test-slot-1"></slot></h1></div></template>'
})

new Vue({
  el: '#app',
  template: '<child><div slot="test-slot">This is test-slot! </div><div slot="test-slot-1">This is test-slot-1!</div></child>',
})

注意上面template直接改成div标签，效果还是如上图所示一致。

    3.带有slot-scope的特性的作用域插槽：在 <template> 上使用特殊的 slot-scope 特性，可以接收传递给插槽的 prop。通俗地讲，父组件通过这种方式可以取到子组件中的相关数据。

直接看代码如下所示：

Vue.component('child', {
  template: '<div><slot name="test-slot" :message="message"></slot></div>',
  data: function(){
    return {
      message: 'this is props for slot!'
    }
  }
})

new Vue({
  el: '#app',
  template: '<child><div slot="test-slot" slot-scope="scope">{{ scope.message }}</div></child>'
})

2. slot新语法v-slot：

    1.默认插槽和之前一样这里就不做解释了；

     2.具名插槽，我们先看代码

//2.6.0新增插槽语法

Vue.component('child', {
  template: '<div><template><slot name="test"></slot></template></div>'
})

new Vue({
  el: '#app',
  template: "<div><child v-slot:test>{{ user.firstName }}</child></div>",
  data: function(){
    return {
      user: {
        firstName: 'Jerry'
      }
    }
  }
})

      3.作用域插槽直接看代码

//2.6.0新增插槽语法

Vue.component('child', {
  template: '<div><slot name="test" :user=user></slot></div>',
  data: function () {
    return {
      user: {
        firstName: 'Jerry'
      }
    }
  }
})

new Vue({
  el: '#app',
  template: '<div><child v-slot:test="slotProper">{{ slotProper.user.firstName }}</child></div>'
})

     4.插槽结构所以也可以这么写

//2.6.0新增插槽语法

Vue.component('child', {
  template: '<div><slot name="test" :user=user></slot></div>',
  data: function () {
    return {
      user: {
        firstName: 'Jerry'
      }
    }
  }
})

new Vue({
  el: '#app',
  template: '<div><child v-slot:test="{user}">{{ user.firstName }}</child></div>'
})

      5.动态插槽，这也是非常简单如下所示

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

总的来讲新的v-slot也确实是简化了代码的写法，也提供了新的功能例如动态插槽，这个属性让插槽操作更加灵活。