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中的“以函数为子组件”,由父组件决定渲染的内容(包含绑 ...
随机推荐
- sql 预编译 in
sql : "select * from json where id in (:paramName)"; 在使用Hibernate时,sql in的预编译语句为query.setP ...
- 数学【CF743C】Vladik and fractions
Description 请找出一组合法的解使得\(\frac {1}{x} + \frac{1}{y} + \frac {1}{z} = \frac {2}{n}\)成立 其中\(x,y,z\)为正整 ...
- Web应用主动侦测工具Skipfish
Web应用主动侦测工具Skipfish Skipfish是Kali Linux附带的一个主动Web应用侦测工具.该工具会首先尽可能获取所有网站路径,进行访问,然后根据返回的内容,检测是否存在漏洞. ...
- BZOJ 3437 小P的牧场（斜率优化DP）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3437 [题目大意] n个牧场排成一行,需要在某些牧场上面建立控制站, 每个牧场上只能建 ...
- List the Books
描述 Jim is fond of reading books, and he has so many books that sometimes it's hard for him to manage ...
- 找出N个数中最小的k个数问题(复杂度O(N*logk))
这是一个经典的算法题,下面给出的算法都在给定的数组基础上进行,好处时不用分配新的空间,坏处是会破坏原有的数组,可以自己分配新的空间以避免对原有数组的破坏. 思路一 先直接排序,再取排序后数据的前k个数 ...
- 鹦鹉学舌1——C语言初学者百题大战之三
#include<stdio.h> int main() { int a; scanf("%d",&a); printf("%d",a-a+ ...
- JS类型判断typeof PK {}.toString.call(obj)
参考链接:https://www.talkingcoder.com/article/6333557442705696719 先看typeof <!doctype html> <htm ...
- nodejs第一个练习：用Node.js建HTTP服务器
这是官方的一个例子, 在F盘建立一个tinyphp.js文件,内容: var http = require('http'); http.createServer(function (req, res) ...
- 回顾苹果操作系统Mac OS的发展历史
在新的MacBook AIR和Mac OS X Lion即将发布之际,我们仅以此文向伟大的苹果和乔布斯致敬.并祝Apple教主乔布斯早日康复,长命百岁,千秋万载,一统苹果! Mac OS是指运行于苹果 ...