vue2 作用域插槽slot-scope详解

最新推荐文章于 2025-06-08 20:00:00 发布

dengduoan5084

最新推荐文章于 2025-06-08 20:00:00 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 操作系统 ViewUI

原文链接：http://www.cnblogs.com/xujian2016/p/10184743.html

本文主要探讨Vue2中的作用域插槽，它允许子组件传递数据到父组件的插槽中，使父组件能控制样式，而内容由子组件控制。不同于传统插槽，作用域插槽可以绑定数据，且在Vue 2.5.0+之后，不在局限于`<template>`元素，可在插槽内的任何元素或组件上使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插槽分为单个插槽，具名插槽，还有作用域插槽，前两种比较简单这里就不赘述了，今天的重点是讨论作用域插槽。

简单来说，前两种插槽的内容和样式皆由父组件决定，也就是说显示什么内容和怎样显示都由父组件决定；

作用域插槽的样式由父组件决定，内容却由子组件控制。简单来说：前两种插槽不能绑定数据，作用域插槽是一个带绑定数据的插槽。

注意:在 2.5.0+，slot-scope 不再限制在 <template> 元素上使用，而可以用在插槽内的任何元素或组件上。

1.App.vue

 1 <template>
 2   <div>
 3     <child :propName="items"> <!--传值到子组件-->
 4     <!--写法1 -->
 5       <li
 6         <!--作用域插槽也可以具名 绑定slot name="slotName"-->
 7       slot="slotName"       
 8         <!--把子组件插槽看作一个对象, 赋给scopeName-->
 9       slot-scope="scopeName">
10         <!-- dos="item.do" (子组件中)-->
11         {{scopeName.dos}}
12       </li>
13     </child>
14 
15     <!--写法2 es6 的解构写法 推荐!!!-->
16     <child :propName="items">
17       <li slot="slotName" slot-scope="{item}">
18         {{item.do}}
19       </li>
20     </child>

21   </div>
22 </template>
23 <script>
24   import child from "./components/child.vue"
25   export default{
26     components:{child},
27     data(){
28       return{
29         items:[
30           {do:'play'},
31           {do:'eat'},
32           {do:'sleep'},
33           {do:'play'},
34           {do:'eat'},
35           {do:'sleep'}
36         ]
37       }
38     }
39   }
40 </script>

2.child.vue

 1 <template>
 2   <ul>
 3     <slot name="slotName"  <!--作用域插槽也可以具名!-->
 4         v-for="item in items" 
 5         :dos="item.do"  <!--取循环中的项作为属性 方便父组件调用!-->
 6     ></slot>
 7   </ul>
 8 </template>
 9 <script>
10   export default{
11     props:['items'] <!--父级items 传过来的值!-->
12   }
13 </script>