作用域插槽
有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽，为了让这个特性成为可能，你需要做的全部事情就是将待办项内容包裹在一个 <slot> 元素上，然后将所有和其上下文相关的数据传递给这个插槽：
使用场景：当子组件做循环，或某一部分的DOM结构是由外部传递进来时
案例：子组件列表循环，传值到父组件中显示出来
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue中的作用域插槽</ > < src = "./vue.js"></ ></head><body> <div id ='root'> <child> <tempalte slot-scope="props"> <li>{{props.item}} -hello</li> </tempalte> </child> < > //在child中可以使用item 数据，item数据放到 props属性 中 Vue.component('child',{ data:function(){ return{ list:[1,2,3,4] } }, //child 组件做列表的循环，列表中的每一项如何显示并不关心，显示由外部决定 //外部组件调用chlid，需要向子组件传递slot，告知子组件如何显示列表的每一项 // template:`<div> <ul> <slot v-for="item of list" :item=item > </slot> </ul> </div>` }) var vm = new Vue({ el:'#root' }) </ > </body></html>输出：
执行逻辑：1.父组件调用子组件的时候，给子组件传入插槽
2.这个插槽是作用域插槽，必须是<template></template>样式,要声明在子组件接收到的数据都放在 solt-scope 中，即 props 中，还要告诉子组件模板的信息，如何展示，即 <li>{{props.item}} -hello</li>；
继续阅读与本文标签相同的文章
-
Spring IOC的一些高级特性
2026-05-26栏目： 教程
-
SQL--( 图解 mybatis ）
2026-05-26栏目： 教程
-
SQL--(MyBatis 原理和配置文件的基本使用）
2026-05-26栏目： 教程
-
正则表达式不再难懂
2026-05-26栏目： 教程
-
初识 Spring(08)---(jdbc）
2026-05-26栏目： 教程