Vue 作用域插槽
使用场景：复用子组件的slot，又可以使slot的内容不一样。
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<my-component :books="books">
<template slot="book" slot-scope="props">
<li>{{props.bookName}}</li>
</template>
</my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: ` <ul> <slot name="book" v-for="book in books" :book-name="book.name"><slot> </ul> `,
props: {
books: {
type: Array,
default: function() {
return [];
}
}
}
});
new Vue({
el: "#app",
data: {
books: [{
name: 'css'
}, {
name: 'js'
}, {
name: 'html'
}, ]
}
})
</script>
</body> </html>
Vue 作用域插槽的更多相关文章
- vue作用域插槽的应用
问题场景: 存在一个列表,然后当鼠标放入列表中的名称上的时候,自动弹出简介,类似这种效果, 我们当然可以使用positon relative和absolute搭配达到这样的效果,但是现在有一个奇葩的问 ...
- 细说Vue作用域插槽，匹配应用场景。
最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子, ...
- vue 开发系列(十) VUE 作用域插槽
使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...
- Vue作用域插槽：用作循环结构的模版
一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <todos :list=&q ...
- Vue作用域插槽：基本用法
一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <user v-slot:de ...
- vue作用域插槽
简而言之,作用域插槽就是让插槽内容能够访问子组件中的数据. 案例如下:有CurUser组件 <template> <span> <!-- 在slot 元素上绑定user, ...
- 新版vue作用域插槽的使用
2.6开始,作用域插槽的使用有了不同的地方: 作用域插槽的个人理解就是让子组件的数据可以在父组件中使用: 也是一个数据传递的方式了: 不多说,上代码 子组件定义一个插槽,并且定义一个需要传递到父组件 ...
- vue作用域插槽实践
引言 我在练手的时候发现后端返回的数据可以通过两种方式渲染 (自己遇到的 可能你都会 哈哈哈) 后端传过来的数据函数 from django.http import JsonResponse def ...
- Vue的作用域插槽
一.通常情况下都是父组件传递数据给子组件进行展示的(无法改变子组件的展示方式):而作用域插槽允许子组件通过slot向父组件传递数据,类似React中的“以函数为子组件”,由父组件决定渲染的内容(包含绑 ...
随机推荐
- webpack配置点记录
jsx语法需要用到babel-preset-react: 通用babel-loader相关如下: 以上配置还只能针对ES6情况,static defaultProps是ES7的特性,需要引入新的配置:
- Bzoj 1014&Luogu 4036 火星人Prefix（FHQ-Treap）
题面 洛谷 Bzoj 题解 首先,这种带修改的是不能用$SA$的,然后,我们做$SA$的题一般也能二分+$Hash$,所以不妨考虑用$FHQ-Treap$维护树,然后查询就用二分+$Hash$. $H ...
- 解决phpStudy启动网站警告问题
在用phpStudy的时候,在页面中会有一些警告 notice:Undefined variable... notice:Undefined index... 在php.ini里面找到 display ...
- hdu 2196（Computer 树形dp）
A school bought the first computer some time ago(so this computer's id is 1). During the recent year ...
- JDBC 编程
DAO设计 没有使用DAO存在的问题:多个地方都要都同时做CRUD操作时,重复的代码就会很多. DAO:Data Access Object(数据存取对象). 位于业务逻辑和持久化数据之间,实现对持久 ...
- 【强联通分量缩点】【Tarjan】bzoj1051 [HAOI2006]受欢迎的牛
就是看是否有一些点,从其他任何点出发都可到达 定理:有向无环图中唯一出度为0的点,一定可以由任何点出发均可达. 所以缩点,若出度为零的点(强联通分量)唯一,则答案为该强联通分量中点的度数. 若不唯一, ...
- JAVA使用POI如何导出百万级别数据(转载)
用过POI的人都知道,在POI以前的版本中并不支持大数据量的处理,如果数据量过多还会常报OOM错误,这时候调整JVM的配置参数也不是一个好对策(注:jdk在32位系统中支持的内存不能超过2个G,而在6 ...
- MYSQL复习笔记3-用户和安全
Date: 20140115Auth: Jin参考:http://dev.mysql.com/doc/refman/5.1/en/security.html 一.权限系统实现方式相关权限信息存储在几个 ...
- [典型漏洞分享]结合YS业务分析使用oauth协议的风险
结合YS业务分析oauth协议风险 问题描述: YS 使用QQ互联的openAPI实现QQ登录YS的功能,使用该功能需要在腾讯注册登录时的回调地址,根据oauth协议,用户的code或者access_ ...
- [典型漏洞分享]YS忘记密码机制设计存在缺陷，导致任意用户口令均可被修改【高】
记录了安全测试过程中发现的一些典型的安全问题 YS忘记密码机制存在缺陷,可导致任意用户口令被修改[高] 问题描述: YS网站提供用户密码修改功能,当用户忘记密码时可通过该功能找回密码,但该修改密码的流 ...