<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue作用域插槽</title> <script src="vue.js"></script> </head> <body> <div id="root"> <child> <template slot-scope="props"> <li>{{props.item}}</li> </template> <p>作用域插槽：当子组件做循环或某部分的dom结构需要外部传递时使用，必须使用tempalte标签和slot-scope</p> </child> </div> <script> Vue.component('child',{ data:function(){ return { list:[1,2,3,4] } }, template:'<div>' + '<ul>' + '<slot v-for="item of list" :item=item></slot>' + '</ul>' + '</div>' }) var vm= new Vue({ el:"#root" }) </script> </body> </html>
作用域插槽
猜你喜欢
转载自blog.csdn.net/qq_19168521/article/details/80931193
今日推荐
周排行