vue slot的scope传递
作者：佳明妈 来源：云计算 2017-09-21 人气：vue slot的scope传递，要表述的意思组件中slot这个插槽上可以赋值各种属性，在调用组件的页面中可以使用template scope="props"来获取插槽上的属性值，获取到的值是一个对象
vue slot的scope传递，暂时这么称呼这个标题，要表述的意思组件中slot这个插槽上可以赋值各种属性，在调用组件的页面中可以使用<template scope="props"> 来获取插槽上的属性值，获取到的值是一个对象。
我们来看个demo
页面中调用list组件，这里不需要关注组件到底是怎么写的，数据到底是啥，只要关注 <template scope="scope"> 以及数据调用情况{{scope.row.name}}，
<list :data="listData" class="img-list">
<list :data="listData" class="img-list">
<template scope="scope">
<div class="info">
<p>数据：{{scope}}</p>
<p>索引：{{scope.$index}}</p>
<p>姓名：{{scope.row.name}}</p>
<p>性别：{{scope.row.sex}}</p>
</div>
</template>
</list>
list组件中的slot是这样子的：
list组件中的slot是这样子的：
<ul>
<li v-for="(item,i) in data">
<slot :row="item" :$index="i"></slot>
</li>
</ul>
注意：<slot :row="item" :$index="i"></slot> 这里的属性在上面list组件调用的时候就会打印出一个对象{ "row": { "name": "张三", "sex": "男" }, "$index": 0 }对比这个对象就明白上面调用是咋回事了。
vue slot的scope传递这种东西有啥用？
就是在那种传入结构不确定，会经常变得情况是非常好用的。
注意：<slot :row="item" :$index="i"></slot> 这里的属性在上面list组件调用的时候就会打印出一个对象{ "row": { "name": "张三", "sex": "男" }, "$index": 0 }对比这个对象就明白上面调用是咋回事了。
vue slot的scope传递这种东西有啥用？
就是在那种传入结构不确定，会经常变得情况是非常好用的。
vue slot的scope传递组件嵌套也是可以传递的
比如可以把上面的list组件中再引入一个子组件
<ul>
<list-item v-for="(item,i) in data">
<slot :row="item" :$index="i">00</slot>
</list-item>
</ul>
不过要记住：list组件里面和调用list组件的页面中都要引入list-item子组件，否则报错。
不过要记住：list组件里面和调用list组件的页面中都要引入list-item子组件，否则报错。
vue slot的scope传递值是父作用域中的源数据改变，值会同步改变
↓ 查看全文
vue slot的scope传递由懒人建站收集整理，您可以自由传播，请主动带上本文链接
懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
vue slot的scope传递-最新评论