从组件封装看Vue的作用域插槽的实现

作用域插槽不是那么直观的一个概念。Vue文档使用了一段描述性的话来解释作用域插槽：

有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽
……
但是在我们应用的某些部分，我们希望每个独立的待办项渲染出和 todo.text 不太一样的东西。这也是作用域插槽的用武之地。

但在我看来，至少是第一次读到的时候，这段话相当不好理解。插槽不是分发内容到子组件吗，为什么还要从子组件中获取数据？不是已经有了通过emit事件的方法从子组件向父组件传递数据吗，为什么需要它？作用域插槽到底是来干嘛的？……

在浏览了不少博客、自己思考“如果不这么做，就会怎么样”再动手实践之后，作用域插槽的含义才逐渐明了。其实作用域插槽提供了一种封装可复用组件的新思路。下面我会从最简单的例子开始。

简单的展示列表

现在我们做一个纯展示用途的列表组件，如下图所示：

第一个例子先用slot来分发内容

<template> <div class="list">  <div class="list-title">   <slot name="title"></slot>  </div>  <div class="list-content">   <slot name="content"></slot>  </div> </div></template><script> export default {  name: "MyList" }</script>

在父组件中使用MyList

<template> <MyList>  <span slot="title">title</span>  <ul slot="content">   <li v-for="item in listData">{{item}}</li>  </ul> </MyList></template><script> import myList from './List.vue'; export default {  name: 'HelloWorld',  components: {   'MyList': myList  },  data() {   return {    listData: [      '列表项1',      '列表项2',      '列表项3'    ]   }  } }</script>

省略了其中的样式代码，结果如图所示

满足了基本的需求，但是作为组件的使用者，这样的一个组件会让我觉得非常麻烦，content中循环的逻辑还需要我自己动手来写，这样的使用毫无便利性。于是有了下面第二个版本

使用prop来传递数据

因为考虑到列表的内容总是一个数组，我把循环结构写进了组件中

列表组件第二版：

<template> <div class="list">  <div class="list-title">{{title}}</div>  <ul class="list-content">   <li v-for="(item ,index) in content" :key="index">{{item}}</li>  </ul> </div></template><script> export default {  name: "MyList",  props: {   title: {    type: String,    required: true   },   content: {    type: Array,    required: true   }  } }</script>