c++ 外部组件发生异常_Vue组件化开发之插槽

    插槽为组件提供了强大的扩展能力。我们可以把电脑的主板理解为一个已经封装好的组件，主板上都会预留各种插槽，我们可以往插槽中插入内存条、显卡、声卡等设备。基于同样的思想，Vue在封装组件时，也可以预留插槽，在组件被使用的时候，我们就可以往组件插槽中插上其他内容。

    Vue中的插槽用 slot 标签进行占位。这一块我们会讲两部分内容：插槽和作用域插槽。

    插槽可理解为，父模板中向子组件内部传递内容。作用域插槽则是，父模板中获取子组件中的数据，组装好内容之后再传递给子组件。下面我们分别详细介绍。

一、插槽

前面说了，插槽是使用 slot 标签在组件中放置占位符。我们定义一个带插槽的组件。

Vue.component('alert-box', {  template: `    

      Error!

`})

组件模板 template 中的  就是我们为 alert-box 组件预留的插槽。alert-box 组件在使用的时候，我们就能往插槽中传递内容。

比如我们传递一段文本

  Something bad happened.

就会被渲染如下

如果我们传递一个按钮

  紧急事件

按钮就会被渲染出来

我们也可以传入一堆HTML内容，这些HTML内容都会渲染到 slot 所在的位置。

紧急通知

请同学们赶紧撤离

校长办公室

渲染如下

通过上面这个例子，应该大致明白了插槽的作用。

    为了方便使用，Vue提供了给插槽设置默认内容的功能。如果外部不传入内容，则展示默认内容。如果外部传入内容，则展示传入的内容。

Vue.component('alert-box', {  template: `    

Error! Something bad happened.

`})

默认内容是放在  中间，上面我们就是在  中间放置了一段文本 Something bad happened. 。在使用的时候，如果不传入内容，默认就显示这段文本。

紧急撤离

就会被渲染成

    上面我们没有给插槽指定名字，实际上Vue会给没有起名字的插槽自动加上一个 default 的名字，等同于

    我们也可以为插槽指定其它名字，以方便外部在传入内容的时候，可以指定将内容传递给哪个插槽。这样就更接近电脑主板的思想了，主板上的插槽是分内存条插槽、显卡插槽、声卡插槽 等等，每一个插槽都是有名字的。

    我们的组件插槽也可以这样，比如下面代码中我们就指定了头部插槽、尾部插槽。

Vue.component('base-layout', {    template: `            `})

    这时候在使用的时候，就需要指定内容究竟是传递给哪个插槽，未指定的都会传递给匿名插槽，也就是 default 插槽。

Here might be a page title

A paragraph for the main content.

And another one.

Here's some contact info

    如果组件内有多个匿名插槽，那就会传递多份。如果组件内没有匿名插槽，未指定插槽名的内容就会被丢弃。

    不过，slot 属性在Vue 2.6.0版本中已经不推荐使用，官方推荐用 v-slot 指令来替代 slot 。v-slot 指令更强大，它不仅可以在这里替代 slot ，还可以替代作用域插槽中的 slot-scope。

    我们使用 v-slot 指令改造一下上面的用法。我们通过在一个  元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称，来向具名插槽传递内容。

Here might be a page title

A paragraph for the main content.

And another one.

Here's some contact info

    这两种使用的效果是一样的。不过我们推荐使用新语法 v-slot 指令。

二、作用域插槽

    在学习作用域插槽之前，我们先要明白作用域插槽到底解决了什么问题。

    很多时候我们会有这样的需求，需要把子组件中的数据通过父级模板的控制，从而在子组件中渲染出不同的样子。这句话不太好理解，举个具体的例子。

    子组件的数据中有一数组

 letters = ['A', 'B', 'C', 'D', 'E']

我们在某处需要把这个数组渲染成：A - B - C - D - E，而在另一处又需要渲染成列表：

• A

• B

• C

• D

• E

    这时候就可以通过作用域插槽来实现。作用域插槽就是数据由子组件提供，排版由父组件控制。

    在介绍作用域插槽之前，先要介绍一下编译作用域。因为正是编译作用域的存在，才使得作用域插槽有存在的必要。

2.1 编译作用域

    编译作用域，简单的说就是父子组件都只能取到自己实例中的数据。官方也给出了描述：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

    我们通过一个具体的例子来说明其含义

{{msg}}  let vm = new Vue({    el: '#app',    components: {      com: {        template: `        data() {          return {            msg: '子组件'          }        }      }    },    data: {      msg: '父组件'    }  })

    父子组件中在各自的 data 中都定义了msg，并且他们值不一样。那子组件在使用的时候

{{msg}}

插值表达式 {{msg}} 到底取到的是谁的数据？很方便可以验证出 {{msg}} 取到的是父组件的数据。其实在父级模板中是无法直接取到子组件中的数据。这正是因为有编译作用域的存在。同理，在子组件中，也不能直接使用父组件中的数据。当然父子组件中的数据并不是绝对隔离，我们可以通过传值的方式，让他们数据进行交互。

作用域插槽就是要解决在父级模板中取到子组件中数据的问题。

2.2 作用域插槽

    现在目标已经明确，我们就是要在父级模板中取到子组件中的数据，所以这里势必要进行数据传递。

    先考虑子组件的数据传出，我们可以给 slot 标签设置一个自定义属性 data，然后将数据绑定到自定义属性 data 上，即可将数据传出。

然后在父级模板中接收数据。Vue是通过在 上使用特殊的 slot-scope属性，接收子组件设置在插槽 slot 上的全部自定义属性。

scope 变量就会接收到设置在 slot 上的全部自定义属性，然后我们通过点属性名的方式，就可以取到绑定在属性上面的值。

  {{scope.data}}

    现在我们来实现前面说的字符数组的渲染。在Vue实例中创建子组件com如下

  let vm = new Vue({    el: '#app',    components: {      com: {        template: `                  `,        data() {          return {            letters: ['A', 'B', 'C', 'D', 'E']          }        }      }    },  })

可以把它渲染成列表

            {{item}}      

也可以渲染成短横线连接的形式

      {{scope.data.join(' - ')}}  

我们就可以看到相同的数据展示成不同的形式。

    现在我们再完善一下作用域插槽的定义：子组件向父组件传递数据，但父组件通过传递插槽内容来控制数据在子组件中展现方式。

    前面说了，slot-scope在 Vue 2.6.0中不再推荐使用，应该使用 v-slot 指令来替代，上面渲染的代码就可以改造如下

            {{item}}            {{scope.data.join(' - ')}}  

总结

    本章我们主要介绍了插槽和作用域插槽。插槽部分讲了插槽的使用、插槽默认值、具名插槽。作用域插槽部分主要讲了编译作用域和作用域插槽的使用。

    这一块内容是Vue中的高级部分，运用恰当，威力极大。