首页 / VUE / Vue作用域插槽使用详解
Vue作用域插槽使用详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue作用域插槽使用详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1751字，纯文字阅读大概需要3分钟。
内容图文
这次给大家带来Vue作用域插槽使用详解，Vue作用域插槽使用的注意事项有哪些，下面就是实战案例，一起来看一下。举个例子，比如我写了一个可以实现条纹相间的列表组件，发布后，使用者可以自定义每一行的内容或样式（普通的slot就可以完成这个工作）。而作用域插槽的关键之处就在于，父组件能接收来自子组件的slot传递过来的参数，具体看案例和注释。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vue作用域插槽</title>
<scriptsrc="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<pid="app2">
<my-stripe-list:items="users"odd-bgcolor="#D3DCE6"even-bgcolor="#E5E9F2">
<!-- props对象接收来自子组件slot的$index参数 -->
<templateslot="cont"scope="props">
<span>{{users[props.$index].id}}</span>
<span>{{users[props.$index].name}}</span>
<span>{{users[props.$index].age}}</span>
<!-- 这里可以自定[编辑][删除]按钮的链接和样式 -->
<a:href="'#edit/id/'+users[props.$index].id"rel="external nofollow">编辑</a>
<a:href="'#del/id/'+users[props.$index].id"rel="external nofollow">删除</a>
</template>
</my-stripe-list>
</p>
<script>
Vue.component('my-stripe-list', {
/*slot的$index可以传递到父组件中*/
template: `
<p>
<pv-for="(item, index) in items"style="line-height:2.2;":style="index % 2 === 0 ? 'background:'+oddBgcolor : 'background:'+evenBgcolor">
<slotname="cont":$index="index"></slot>
</p>
</p>
`,
props: {
items: Array,
oddBgcolor: String,
evenBgcolor: String
}
});
new Vue({
el: '#app2',
data: {
users: [
{id: 1, name: '张三', age: 20},
{id: 2, name: '李四', age: 22},
{id: 3, name: '王五', age: 27},
{id: 4, name: '张龙', age: 27},
{id: 5, name: '赵虎', age: 27}
]
}
});
</script>
</body>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
JS实现评价星级
js实现图片匀速淡入淡出
JS实现数据验证与复选框表单提交
以上就是Vue作用域插槽使用详解的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的Vue作用域插槽使用详解全部内容，希望文章能够帮你解决Vue作用域插槽使用详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】