具体讲解的url

https://github.com/cunzaizhuyi/vue-slot-demo

//例子

用jsfiddle.net去运行就好

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue作用域插槽</title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app2">
<my-stripe-list :items="users" odd-bgcolor="#D3DCE6" even-bgcolor="#E5E9F2">
<!-- props对象接收来自子组件slot的$index参数 -->
<template slot="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>
</div>
<script>
Vue.component('my-stripe-list', {
/*slot的$index可以传递到父组件中*/
template: `
<div>
<div v-for="(item, index) in items" style="line-height:2.2;" :style="index % 2 === 0 ? 'background:'+oddBgcolor : 'background:'+evenBgcolor">
<slot name="cont" :$index="index"></slot>
</div>
</div>
`,
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>

vue.js插槽的更多相关文章

  1. Vue.js插槽slot和作用域插槽slot-scope学习小结

    一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...

  2. Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解

    普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单 ...

  3. Vue.js 源码分析(二十五) 高级应用 插槽 详解

    我们定义一个组件的时候,可以在组件的某个节点内预留一个位置,当父组件调用该组件的时候可以指定该位置具体的内容,这就是插槽的用法,子组件模板可以通过slot标签(插槽)规定对应的内容放置在哪里,比如: ...

  4. Vue.js——60分钟组件快速入门（下篇）

    概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...

  5. Vue.js学习 Item11 – 组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  6. vue.js笔记

    一.v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> &l ...

  7. vue.js学习之组件（下篇）

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

  8. 说说VNode节点(Vue.js实现)

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...

  9. Vue.js——60分钟组件快速入门

    一.组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HT ...

随机推荐

  1. MySQL 字符集问题

    MySQL 支持许多字符集及其编码方案, 甚至是不同编码之间的转换. 在使用 MySQL 进行应用程序编程时, 常常会出现乱码现象, 这通常是由于客户端没有声明与 MySQL 服务器通信的字符串编码造 ...

  2. 三、文件IO——系统调用

    3.1 文件描述符 文件IO 系统调用是不带缓存的,文件 I/O 系统调用不是 ANSI C 的组成部分,是 POSIX 的组成部分. 系统调用与C库: C库函数的IO 的底层还是调用系统调用 I/O ...

  3. Redis Fun使用

    using Newtonsoft.Json; using StackExchange.Redis; using System; using System.Configuration; using Sy ...

  4. Java SE之XML<二>XML DOM与SAX解析

    [文档整理系列] Java SE之XML<二>XML DOM与SAX解析 XML编程:CRUD(Create Read Update Delete) XML解析的两种常见方式: DOM(D ...

  5. ubuntu下objective-c的编译和运行

    ubuntu 下编译objective-c 1.安装编译环境 sudo aptitude install build-essential gobjc gobjc++ gnustep gnustep-d ...

  6. DeepLearning.ai-Week4-Face Recognition for the Happy House

    1 - Task Implement the triplet loss function Use a pretrained model to map face images into 128-dime ...

  7. java中有哪4种整形数据类型？它们有什么不同之处？

    java中有哪4种整形数据类型?它们有什么不同之处? (byte.short.int和long型)最大值和最小值都不一样.

  8. 【多视图几何】TUM 课程 第5章 双视图重建：线性方法

    课程的 YouTube 地址为:https://www.youtube.com/playlist?list=PLTBdjV_4f-EJn6udZ34tht9EVIW7lbeo4 .视频评论区可以找到课 ...

  9. Hibernate的学习（二）

    ---恢复内容开始--- 一.多表的建表原则 1.一对多的关系:例如 一个客户有多个联系人: 表与表一对多的关系:在一对多时,多的表中添加一个外键,用来和一的表的主键.产生联系. 2.多对多的关系:例 ...

  10. MySQL登录报错ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)

    [root@pisphkdcbsql01 mysql3307]# /opt/mysql3307/bin/mysql -upisp -ppisp@ mysql: [Warning] Using a pa ...