如何通过Vue插槽实现组件间的灵活内容传递与扩展？

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

Vue的插件，是一种内容分发机制，但我感觉它更像是一种组件的占位符概念。通过插件，可以等待组件外部传入复杂的内容。使用插件的好处在于，在之前的例子中，如todo-item插件，可以直接写入t等简单内容。

Vue的插槽，是一种内容分发机制，但是我感觉它更加像组件的一种占位符的概念，通过插槽，等待组件外部传入复杂的内容。

使用插槽的好处

在以前的例子中todo-item插槽直接写在了todo-list插槽中，其实是比较不合理的，它会导致todo-list插槽比较死板，无法重用更多的其他组件。

Vue.component("todo-list", { template: ` <ul> <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del"></todo-item> </ul> `, data: function() { return { }; }, methods:{ } });

通过插槽化改造，则可以允许使用todo-list组件的用户自行的传入想要使用的todo-item，而不是一个固定的内容。

插槽改造过程

改造示例：

• 将todo-item组件从todo-list组件中移除，放到页面的html代码中。