Vue作用域插槽:用作循环结构的模版
一 项目结构
二 App组件
<template>
<div id="app">
<!-- 子组件 -->
<todos :list="list" v-slot:default="{item}">
<!-- 插槽内容 -->
<span v-if="item.isComplete">✓</span>
{{item.text}}
</todos>
</div>
</template> <script>
import Todos from "./components/Todos.vue"; export default {
name: "app",
data() {
return {
list: [
{
isComplete: true,
text: "联网"
},
{
isComplete: false,
text: "玩游戏"
}
]
};
},
components: {
Todos
}
};
</script> <style>
</style>
三 Todos组件
<template>
<ul>
<li v-for="(item,index) in list" :key="index">
<!-- 作用域插槽:用作循环结构的模版 -->
<slot :item="item"/>
</li>
</ul>
</template>
<script>
export default {
props: {
list: {
type: Array,
default() {
return [];
}
}
}
};
</script>
<style>
</style>
四 运行效果
Vue作用域插槽:用作循环结构的模版的更多相关文章
- Vue作用域插槽:基本用法
一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <user v-slot:de ...
- vue作用域插槽的应用
问题场景: 存在一个列表,然后当鼠标放入列表中的名称上的时候,自动弹出简介,类似这种效果, 我们当然可以使用positon relative和absolute搭配达到这样的效果,但是现在有一个奇葩的问 ...
- 细说Vue作用域插槽,匹配应用场景。
最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子, ...
- vue 开发系列(十) VUE 作用域插槽
使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...
- vue作用域插槽
简而言之,作用域插槽就是让插槽内容能够访问子组件中的数据. 案例如下:有CurUser组件 <template> <span> <!-- 在slot 元素上绑定user, ...
- 新版vue作用域插槽的使用
2.6开始,作用域插槽的使用有了不同的地方: 作用域插槽的个人理解就是让子组件的数据可以在父组件中使用: 也是一个数据传递的方式了: 不多说,上代码 子组件定义一个插槽,并且定义一个需要传递到父组件 ...
- Vue 作用域插槽
使用场景:复用子组件的slot,又可以使slot的内容不一样. <!DOCTYPE html> <html lang="zh"> <head> ...
- vue作用域插槽实践
引言 我在练手的时候发现后端返回的数据可以通过两种方式渲染 (自己遇到的 可能你都会 哈哈哈) 后端传过来的数据函数 from django.http import JsonResponse def ...
- Vue的作用域插槽
一.通常情况下都是父组件传递数据给子组件进行展示的(无法改变子组件的展示方式):而作用域插槽允许子组件通过slot向父组件传递数据,类似React中的“以函数为子组件”,由父组件决定渲染的内容(包含绑 ...
随机推荐
- python 正确复制list,克隆list 的各种方案
推荐4种方法 --------------------------------------------------------------- 方法一:extend L = [1, 2, 3] List ...
- HDU 6468 /// DFS
题目大意: 把 1~15 的数字典序排序后为 1, 10, 11, 12, 13, 14, 15, 2, 3, 4, 5, 6, 7, 8, 9 此时给定 n k, 求1~n的数组字典序排序后 第k个 ...
- Oracle DBA_EXTENTS视图 与 DBA_SEGMENTS视图
DBA_EXTENTS describes the extents comprising the segments in all tablespaces in the database. Note ...
- 搜索(DFS)---查找最大连通面积
查找最大的连通面积 695. Max Area of Island (Medium) [[0,0,1,0,0,0,0,1,0,0,0,0,0], [0,0,0,0,0,0,0,1,1,1,0,0,0] ...
- win32 socket 编程(一)——TCP/IP
一.基本概念 a) 同步:指发送方发出数据后,等收到接收方发回的响应,才发下一个数据包的通信方式. nb)异步:指的是发送方不等接收方响应,便接着发下个数据包的通信方式. c) 阻塞:指调用某函数时, ...
- C#/.NET VS2017+ EF+SQLite.CodeFirst——真正实现CodeFirst
本文所介绍的是真正的EF+CodeFirst,不需要提前建表,由代码自动生成! 进行前需要准备的: 1.下载Sqlite Experthttp://www.sqliteexpert.com/downl ...
- 2019-8-14-win10-使用-SMB-v1
title author date CreateTime categories win10 使用 SMB v1 lindexi 2019-08-14 08:55:55 +0800 2018-2-13 ...
- JFreeChart使用
最近项目需要做图形分析,就想到了使用JFreeChart,之前也没有使用过,就现学先用吧.本文主要记录一些主要的代码及学习使用过程. 使用JFreeChart步骤: 一.下载JFreeChart.ja ...
- 记人生中第一场认真打的CF——CF1000(虽然是Virtual participation)
老师说下午要让我们(来自开明的新高一同学)感受一下CF,于是下午2:20我们就集中到了机房.老师教我们用Educational Codeforces Round 46 (Rated for Div. ...
- SQL Server查询使用键查找时锁申请及释放顺序
当然看的过程中,其实自己有个疑问: 对于键查找这类查询,会申请哪些锁,锁申请和释放的顺序是怎样的? 准备 备注:测试表仍然使用高兄文中创建的测试表testklup 在开始之前,使用dbcc ind 命 ...