<div id='root'> <child> <template slot-scope='props'> <h1>{{props.item}}</h1> </template> </child> </div> <script> Vue.component('child',{ data:function(){ return { list:[1,2,3,4,5] } }, template:`<div> <slot v-for='item of list' :item=item></slot> </div>` }) var vm = new Vue({ el:'#root' }) </script>
vuejs作用域插槽
转载作用域插槽
作用域插槽必须是template开头和结尾的一个内容,slot-scope是声明要接收的子组件参数都放在哪,放在props里面
所以当子组件做循环,她的某一部分dom结构应该由外部传递进来的时候,使用作用域插槽,使用作用域插槽,子组件可以像父组件插槽传递数据
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
下一篇:在vue中使用插槽 slot
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
Python基础笔记-函数的作用、返回值、参数、作用域
主要记录了函数以及函数的参数、返回值、执行、传参、作用域等内容。
作用域 数据 全局变量 函数 Python基础 -
【Vue】作用域插槽
作用域插槽
vue.js javascript 前端 插槽 数据 -
[vue] slot插槽 默认插槽,具名插槽,作用域插槽
文章目录插槽不使用插槽效果分析默认插槽效果分析具名插槽效果分析作用域插槽效果
vue.js 插槽 App 作用域 -
【Vue】 slot插槽、具名插槽和作用域插槽
目录1. 为什么使用插槽?2. 内容插槽3. 具名插槽4. 作用域插槽5. 动态插槽名6. 具名插槽的缩写1. 为什么使
vue js javascript 插槽 作用域 -
Vue 作用域插槽
使用场景:复用子组件的slot,又可以使slot的内容不一样。
VUE 作用域插槽 html css 复用