一个案例看懂Vue.jsscopedslot
时间：2023-03-13 13:53:17
科技观察
Scopedslot是Vue.js中一个非常有用的特性，可以显着提高组件的通用性和复用性。问题是，这并不容易理解。试图弄清楚父子作用域关系的复杂性就像解决一个棘手的数学方程式一样痛苦。当你无法理解某件事时，最好的方法就是体验它在解决问题过程中的应用。本文将向您展示如何使用作用域插槽构建可重用的列表组件。注：完整代码可以去Codepen查看最基本的组件。我们即将构建的组件称为my-list，它用于显示一系列项目。它的特别之处在于，您可以自定义每次使用该组件时列表项的呈现方式。让我们从最简单的单个列表开始：几何名称和边数的数组。app.jsVue.component('my-list',{template:'#my-list',data(){return{title:'Shapes',shapes:[{name:'Square',sides:4},{name:'Hexagon',sides:6},{name:'Triangle',sides:3}]};}});newVue({el:'#app'});index.html
添加一点样式，大概如下图所示：moregeneralmy-list现在我们想让我的列表更通用并且可以呈现任何类型的列表。这次我们展示了一堆颜色名称和相应的颜色方块。为此，我们需要抽象出上面列表特有的数据。由于列表中的项目可能具有不同的结构，我们将给my-list一个插槽，让父组件定义列表的显示方式。app.jsVue.component('my-list',{template:'#my-list',props:['title']});index.html现在，我们在根实例中创建my-list组件的两个实例来显示两个测试用例列表：lists:app.jsnewVue({el:'#app',data:{shapes:[{name:'Square',sides:4},{name:'Hexagon',sides:6},{name:'Triangle',sides:3}],colors:[{name:'Yellow',hex:'#F4D03F',},{name:'Green',hex:'#229954'},{name:'Purple',hex:'#9B59B6'}]}});
{{shape.name}}({{shape.sides}}sides)
