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中的“以函数为子组件”,由父组件决定渲染的内容(包含绑 ...
随机推荐
- scrapy抓取拉勾网职位信息（三）——爬虫rules内容编写
在上篇中,分析了拉勾网需要跟进的页面url,本篇开始进行代码编写. 在编写代码前,需要对scrapy的数据流走向有一个大致的认识,如果不是很清楚的话建议先看下:scrapy数据流 本篇目标:让拉勾网爬 ...
- 并发系列4-大白话聊聊Java并发面试问题之公平锁与非公平锁是啥？【石杉的架构笔记】
- Poj1733 Parity Game（带权并查集）
题面 Poj 题解 反正只要你判断是否满足区间的奇偶性,假设每一位要么是\(1\)要么是\(0\)好了. 假设有\(S\)的前缀和为\(sum[]\),则有: 若\(S[l...r]\)中有奇数个\( ...
- FZU - 1492（Problem 1492 地震预测）
怀特先生是一名研究地震的科学家,最近他发现如果知道某一段时间内的地壳震动能量采样的最小波动值之和,可以有效地预测大地震的发生. 假设已知一段时间的n次地壳震动能量的采样值为a1,a2,-an,那么第i ...
- 【KMP】BZOJ3942-[Usaco2015 Feb] Censoring
[题目大意] 有一个S串和一个T串,长度均小于1,000,000,设当前串为U串,然后从前往后枚举S串一个字符一个字符往U串里添加,若U串后缀为T,则去掉这个后缀继续流程.输出最后的S串. [思路]三 ...
- 【动态规划去除冗余】NOIP2010-乌龟棋
[题目大意] [思路] 最简单的思路是五维数组,但是当前走到的步数由已经取到的卡片决定,所以只需要四维.本来想要改一个滚动数组的,但是好像没有滚起来,算了(ノ｀Д)ノ. 在学校要晚自习到21:15,回 ...
- idea创建多个Module
练习不同的算法时,如果不断的创建工程未免过于麻烦,可以使用在一个工程下创建多个Module的方式,编写多种不同的算法,这些模块互相独立,都有一个入口函数(main),并且,对于创建好的Module,如 ...
- Codeforces Round #127 (Div. 1) C. Fragile Bridges dp
C. Fragile Bridges 题目连接: http://codeforces.com/contest/201/problem/C Description You are playing a v ...
- Hiho----拓扑排序
拓扑排序·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 由于今天上课的老师讲的特别无聊,小Hi和小Ho偷偷地聊了起来. 小Ho:小Hi,你这学期有选什么课么? 小H ...
- Android Logcat Security（转）
讲解了在Android开发中logcat使用不当导致的安全问题 原帖地址:http://drops.wooyun.org/tips/3812 0x00 科普 development version : ...