鲨鱼网
一个案例搞懂Vue.js的作用域插槽
创始人
2025-03-19 04:30:47
0次

 [[279199]]

作用域插槽是 Vue.js 中一个很有用的特性，可以显著提高组件的通用性和可复用性。问题在于，它实在不太好理解。尝试搞清楚父子作用域之间错综复杂的关系，其痛苦程度不亚于求解一个棘手的数学方程。

当你无法理解一个东西的时候，最好的办法就是在解决问题的过程中体会它的应用。本文将向你展示如何使用作用域插槽构建一个可复用的列表组件。

注意: 完整代码可以去 Codepen    查看

最基础的组件

我们即将构建的组件叫做 my-list ，用来展示一系列的项目。它的特别之处就在于，你可以在每次使用组件的时候自定义列表项目的渲染方式。

我们先从最简单的单个列表开始：一个包含几何图形名字和边数的数组。

app.js 

  1. Vue.component('my-list', {  
  2.   template: '#my-list',  
  3.   data() {  
  4.     return {  
  5.       title: 'Shapes',  
  6.       shapes: [   
  7.         { name: 'Square', sides: 4 },   
  8.         { name: 'Hexagon', sides: 6 },   
  9.         { name: 'Triangle', sides: 3 }  
  10.       ]  
  11.     };  
  12.   }  
  13. });  
  14. new Vue({  
  15.   el: '#app'  
  16. }); 

index.html 

  1.   
  2.     
  
  •   
  •     
  •     {{ title }}
    •   
  •       
  •         
  •         
    {{ shape.name }} ({{ shape.sides }} sides)
      
  •       
    •   
  •     
    •   
  •   
    •   
  •  

    • 在加上一点样式，大概就会是下图这个样子：

    更通用的 my-list

    现在我们想要让 my-list 更加通用，可以渲染任何类型的列表。这次我们展示的是一堆颜色的名字以及对应的颜色方块。

    为此，我们需要将上例列表独有的数据进行抽象化。由于列表中的项目可能有不同的结构，我们将会给 my-list 一个插槽，让父组件来定义列表的展示方式。

    app.js 

    1. Vue.component('my-list', {  
    2.   template: '#my-list',  
    3.   props: [ 'title' ]  
    4. }); 

    index.html 

    1.   
    2.     
    3.     {{ title }}
      
  •       
  •         
  •     
    •   
  •   
    •   
  •  

    • 现在，我们在根实例中创建 my-list 组件的两个实例，分别展示两个测试用例列表：lists:

    app.js 

    1. new Vue({  
    2.   el: '#app',  
    3.   data: {  
    4.     shapes: [   
    5.       { name: 'Square', sides: 4 },   
    6.       { name: 'Hexagon', sides: 6 },   
    7.       { name: 'Triangle', sides: 3 }  
    8.     ],  
    9.     colors: [  
    10.       { name: 'Yellow', hex: '#F4D03F', },  
    11.       { name: 'Green', hex: '#229954' },  
    12.       { name: 'Purple', hex: '#9B59B6' }  
    13.     ]  
    14.   }  
    15. });  
    1.   
    2.     
    3.       
    4.       
      {{ shape.name }} ({{ shape.sides }} sides)
        
    5.     
      
  •     
  •     
  •       
  •       
      
  •         
    •   
  •         {{ color.name }}  
  •       
    •   
  •       
  •     
  •  

    • 效果如下图：

    大材小用的组件

    我们刚才创建的组件确实符合要求，但那段代码算不上很好。my-list 本来应该是一个展示列表的组件，但我们却把渲染列表需要的逻辑部分抽象到了父组件中，这样一来，子组件在这里只不过是用来包裹列表而已，未免显得大材小用了。

    更糟糕的是，在两个组件的声明中存在着大量重复代码（例如，

    ）。如果我们能够在子组件中编写这些代码，那么子组件就不再是“打酱油的角色”了。

    作用域插槽

    普通插槽无法满足我们的需求，这时候，作用域插槽就派上用场了。作用域插槽允许你传递一个模板而不是已经渲染好的元素给插槽。之所以叫做”作用域“插槽，是因为模板虽然是在父级作用域中渲染的，却能拿到子组件的数据。

    例如，带有作用域插槽的组件 child 大概是下面这个样子： 

    1.   
    2.     
     

    使用这个组件的父组件将会在插槽中声明一个 template 元素。这个模板元素会有一个 scope （译者注：Vue 2.6 后改为 v-slot 属性）属性指向一个对象，任何添加到插槽（位于子组件模板）中的属性都会作为这个对象的属性。 

    1.   
    2.     
    3.     Hello from parent  
    4.     {{ props.my-prop }}  
    5.     
    6.  

    将会渲染成： 

    1.   
    2.   Hello from parent  
    3.   Hello from child  
    4.  

    在 my-list 中使用作用域插槽

    我们将两个列表数组通过 props 传递给 my-list。之后将普通插槽替换为作用域插槽，这样，my-list 就能够负责迭代列表项目，同时父组件依然能够定义每个项目具体的展示方式。

    index.html 

    1.   
    2.     
    3.       
    4.     
    5.     
    6.       
    7.        
    8.  

    接着我们让 my-list 迭代项目。在 v-for 循环中，item 是当前迭代项目的别名。我们可以创建一个插槽并通过 v-bind="item" 将那个项目绑定到插槽中。

    app.js 

    1. Vue.component('my-list', {  
    2.   template: '#my-list',  
    3.   props: [ 'title', 'items' ]  
    4. }); 

    index.html 

    1.   
    2.     
    3.     {{ title }}  
    4.       
    5.         
    6.           
    7.         
    8.       
    9.     
    10.  

    注意：也许你之前没见过不带参数的 v-bind 用法。这种用法将会把整个对象的所以属性都绑定到当前元素上。在涉及作用域插槽时，这种用法很常见，因为绑定的对象可能有很多属性，而一一将它们列举出来并手动绑定显然太麻烦了。

    现在，回到根实例这里来，在 my-list 的插槽中声明一个模板。首先看一下几何图形列表（第一个例子中的列表），我们声明的模板必须带有一个 scope 属性，这里将其赋值为 shape。shape 这个别名可以让我们访问作用域插槽。在模板中，我们可以继续沿用最初例子中的标记来展示项目。 

    1.   
    2.     
    3.     
      {{ shape.name }} ({{ shape.sides }} sides)
        
    4.     
    5.  

    整个模板大概是下面这样： 

    1.   
    2.     
    3.       
    4.       
      {{ shape.name }} ({{ shape.sides }} sides)
        
    5.       
    6.     
    7.     
    8.       
    9.       
        
    10.           
    11.         {{ color.name }}  
    12.         
    13.       
    14.        
    15.  

    结论

    虽然用上作用域插槽之后，代码量并未减少，但是我们将通用的功能都交由子组件负责，这显著提高了代码的健壮性。

    完整代码的 Codepen 在这里：

    https://codepen.io/anthonygor...

    译者注： Vue.js 2.6.0 之后将 slot-scope 改为 v-slot

     

     

    上一篇：多云架构落地设计和实施方案

    下一篇：为什么我的CV模型不好用？没想到原因竟如此简单……

    相关内容

    热门资讯

    PHP新手之PHP入门 PHP是一种易于学习和使用的服务器端脚本语言。只需要很少的编程知识你就能使用PHP建立一个真正交互的...
    网络中立的未来 网络中立性是什... 《牛津词典》中对“网络中立”的解释是“电信运营商应秉持的一种原则，即不考虑来源地提供所有内容和应用的...
    各种千兆交换机的数据接口类型详... 千兆交换机有很多值得学习的地方，这里我们主要介绍各种千兆交换机的数据接口类型，作为局域网的主要连接设...
    粉嫩如何诠释霸道 东芝M805... “霸道粉”是个什么玩意东芝M805拿过来的时候，笔者扑哧笑了，不是笑这款笔记本，而是笑这款产品的颜色...
    如何利用交换机和端口设置来管理... 在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    什么是大数据安全 什么是大数据... 在《为什么需要大数据安全分析》一文中，我们已经阐述了一个重要观点，即：安全要素信息呈现出大数据的特征...
    只需三步，让你掌握阿尔法路由器... 请参照以下阿尔法路由器设置方法，通过浏览器进入及设置宽带路由器。经过这三个步骤的设置，基本上能够熟悉...
    如何更省钱? 近期特价热门硒鼓... 如今激光打印设备已经成为商务或企业的绝对主力办公设备，但采购者往往忽视了激光打印设备所用的耗材，相对...
    全面诠释网络负载均衡 负载均衡的出现大大缓解了服务器的压力，更是有效的利用了资源，提高了效率。那么我们现在来说一下网络负载...
    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...