Mrliufy
Mrliufy

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是在父组建控制子组件显示或隐藏相关内容，例如下面代码中，如果child子组件没有写slot标签，那么a11这个文本将会被忽略。

Vue.component('child', {
  template: '
'
})

new Vue({
  el: '#app',
  template: '
a11
'
})

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

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

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

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

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

vue插槽详解_第1张图片

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

//具名插槽
Vue.component('child', {
  template:''
})

new Vue({
  el: '#app',
  template: '',
})

   下过如下图所示：

vue插槽详解_第2张图片

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

//具名插槽
Vue.component('child', {
  template:''
})

new Vue({
  el: '#app',
  template: '
This is test-slot! 
This is test-slot-1!
',
})

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

    3.带有slot-scope的特性的作用域插槽：在