vue.js插槽

具体讲解的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">

<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插槽的更多相关文章

Vue.js插槽slot和作用域插槽slot-scope学习小结
一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...
Vue.js 源码分析(二十六) 高级应用作用域插槽详解
普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单 ...
Vue.js 源码分析(二十五) 高级应用插槽详解
我们定义一个组件的时候,可以在组件的某个节点内预留一个位置,当父组件调用该组件的时候可以指定该位置具体的内容,这就是插槽的用法,子组件模板可以通过slot标签(插槽)规定对应的内容放置在哪里,比如: ...
Vue.js——60分钟组件快速入门（下篇）
概述上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...
Vue.js学习 Item11 – 组件与组件间的通信
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
vue.js笔记
一.v-bind 缩写  <a v-bind:href="url"></a>  &l ...
vue.js学习之组件（下篇）
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
说说VNode节点(Vue.js实现)
写在前面因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
Vue.js——60分钟组件快速入门
一.组件简介组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HT ...

随机推荐

ext.net gridlist选择内部元素时自动选择所在行
function changeSelection(id) { var index = 0; for (var i = 0; i < mcp_liststore.data.length; i++) ...
Your accoutn already has a valid IOS Distribution certificate
这个问题是IOS证书不对,登录Apple开发中心,清空所有证书,然后再Archive->Reset.
JS算法练习一
JS算法练习 1.随机生成一个五位以内的数,然后输出该数共有多少位,每位分别是什么? ①.数组添加元素的方式得到位数(数组长度)与值(数组元素) ①.数组添加元素的方式得到位数(数组长度)与值(数组元 ...
git 重命名 origin
git remote rename origin old-origin git remote add origin https://gitlab.com/wuxianqiang/my-project. ...
CSS公共清除浏览器默认样式
/*Vue隐藏*/ [v-cloak] { display: none; } /*清除样式*/ body, ol, ul, dl, li, dt, dd, h1, h2, h3, h4, h5, h6 ...
tomcat源码之connector配置
连接 acceptor /** * Acceptor thread count. */protected int acceptorThreadCount = 0; 处理线程 private int m ...
box-shadow阴影覆盖问题
“商品库”栏下方阴影被覆盖,解决方法:给“商品库”盒子加“position:relative”
python(十一)面向切面编程AOP和装饰器
二.装饰器装饰器可以在给函数修改功能的同时并不改变这个函数本身.(以下用的都是python2.7) 首先,在python里面函数是对象,在下面的函数里"fun"是函数也是对象可以 ...
HTML - HTML基础篇
一.什么是html ? 超文本标记语言.HTML 是标记语言历史版本: Html 4.01 1999年12月24日,w3c推荐标准 (老网站) 如今是 html 5 版本. 1.Html 标签拥有 ...
搭建ubuntu14.04服务器必备环境
1. 设置网络设置网络时,一定要设置好网卡,第一个网卡一定要设置为‘br0’(如下图),设置为其他的上不去网. 修改网络配置文件,命令:sudo gedit /etc/network/interf ...

vue.js插槽

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

随机推荐

热门专题