Vue组件封装中，如何从作用域插槽角度理解其实现原理？

本文共计1571个文字，预计阅读时间需要7分钟。

作用域插槽并非一个直观的概念。Vue文档使用了一句话来解释作用域插槽：+”有时你可能希望提供的组件带有一些可以从子组件获取数据的可复用插槽+”。但在我们的应用中，这并不适用。

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

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

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

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