Vue作用域插槽的示例分析-创新互联

这篇文章主要介绍Vue作用域插槽的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

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

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

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

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

简单的展示列表

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

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

在父组件中使用MyList

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

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

使用prop来传递数据

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

列表组件第二版：

使用起来也非常方便，只需通过prop将数据传入组件中

改进之后，每当我使用组件只需一行代码，大大简化了工作量

易用性的需求也满足了，但现在又有了新的问题，组件的拓展性不好！每次只能生成相同结构的列表，一旦业务需求发生了变化，组件就不再适用了。比如我现在有了新的需求，在一个列表的每个列表项前加入了一个小logo，我总不可能又写一个新的组件来适应需求的变化吧？假如需要更多的定制化场景呢？

作用域插槽

这里就有了第三版的列表组件，使用作用域插槽将子组件中的数据传递出去 

使用组件时，将业务所需的content模板传入

  
  
   
    {{scope.item.prefix ? '有前缀' : '无前缀'}}
    {{scope.item.text}}
    {{scope.item.remark}}