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">
<!-- 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插槽的更多相关文章
- 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 ...
随机推荐
- koa2学习笔记
Koa -- 基于 Node.js 平台的下一代 web 开发框架 首先创建一个项目文件夹进行初始化 npm init -y 该命令执行后会生成一个package.json项目描述文件 安装koa n ...
- DBUtils数据库连接池
DBUtils pip install DBUtils 模式一: 为每个线程创建一个连接.(内部是通过threading.local实现的) 模式二: 创建一定个数的连接,所有线程都来连接池中获取.( ...
- XXE攻防
一.XML基础知识 XML用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言.XML文档结构包括XML声明.DTD文档类型定义(可 ...
- 【51nod 1288】汽油补给
Description 有(N+1)个城市,0是起点N是终点,开车从0 -> 1 - > 2...... -> N,车每走1个单位距离消耗1个单位的汽油,油箱的容量是T.给出每个城市 ...
- flex中使用white-space
在微信小程序开发中,view设置为flex布局,但是flex的flex-wrap属性不起作用,如果起作用的话,默认值即no-wrap不换行.如果要测试view-scroll并且scroll-x 就没法 ...
- JQ中的 offsetTop 和 offset().top 的区别
话不多说先上图: offset()的top是指元素与document的上边的距离,而不是浏览器当前窗体的上边缘,如图 document高度超过window,浏览器出现滚动条,滚动滚动条,提交按钮的of ...
- 批量清除react中的计时器小组件
在Timers的父组件被卸载时,批量清除各个计时器.
- keepalived高可用系列~keepalived+mysql
一 简介:建立读写分离模式 二 keepalived相关配置 vrrp_instance VI_1 { state MASTER // 可修改 interface eth0 virtual_r ...
- 多分类Logistics回归公式的梯度上升推导&极大似然证明sigmoid函数的由来
https://blog.csdn.net/zhy8623080/article/details/73188671 也即softmax公式
- python编程 之 PyMysql包接口，python中如何使用数据库
1,环境介绍 要求:使用数据库TESTDB.EMPLOYMENT EMPLOYEE表字段为 FIRST_NAME, LAST_NAME, AGE, SEX 和 INCOME. 2,基本用法: impo ...