vue作用域插槽示例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作用域插槽具有代表性的实例</title> </head> <body> <div id="mylist"> <my-awesome-list :items="items"> <template slot="item11" scope="props1"> <li class="my-fancy-item"> {{props1.text}} </li> </template> </my-awesome-list> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> var child={ props:["items"], template:'\ <ul>\ <slot name="item11"\ v-for="item in items"\ :text="item.text">\ </slot>\ </ul>\ ' }; new Vue({ el:"#mylist", data:{ items:[ {text:'这是作用域插槽具有代表性的实例'}, {text:'这是作用域插槽具有代表性的实例2'}, {text:'这是作用域插槽具有代表性的实例3'} ] }, components:{ 'my-awesome-list':child } }) /*分析 子组件: <ul>\ <slot name="item11"\-----------------具名slot 给父组件替换的地方 v-for="item in items"\---取出其中的一个item :text="item.text">\ ---props1:作用域插槽,传递给父组件, </slot>\ </ul>\ 父组件: <my-awesome-list :items="items">-----------------通过props属性传递items数据给子组件 <template slot="item11" scope="props1">------------item11:具名slot 替换子组件的数据,---props1:作用域插槽,子组件传来, <li class="my-fancy-item"> {{props1.text}} </li> </template> </my-awesome-list> */ </script> </body> </html>
分析写在注释里了
下面是对比 不用作用域插槽的情况,也就是普通列表渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作用域插槽具有代表性的实例</title> </head> <body> <div id="mylist"> <my-awesome-list :items="items"> </my-awesome-list> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> var child={ props:["items"], template:'\ <ul>\ <slot name="item11"\ v-for="item in items"\ :text="item.text">\ <li> {{item.text}}</li>\ </slot>\ </ul>\ ' }; new Vue({ el:"#mylist", data:{ items:[ {text:'这是作用域插槽具有代表性的实例'}, {text:'这是作用域插槽具有代表性的实例2'}, {text:'这是作用域插槽具有代表性的实例3'} ] }, components:{ 'my-awesome-list':child } }) </script> </body> </html>