细说Vue作用域插槽，匹配应用场景。
最近在官方文档中看到，vue新增了一种插槽机制，叫做作用域插槽。要求的版本是2.1.0+。
首先来说一下：顾名思义，所谓作用域插槽，主要就在作用域，需要注意的是（以下几点看不懂不要紧，配合下面的例子，你会一看就懂）：
1. 组件中的slot标签只能有有一个，而这一个slot用于替代组件调用时的多个标签。即一个slot代替一组范围的标签，即为作用域。
2. 作用域插槽的特殊在于：可在上层作用域中通过临时变量拿到组件定义时通过作用域插槽传递的数据。
3. 作用域插槽的技巧在于：可在上层作用域中通过拿到的数据选择性地渲染标签（即修改slot对应的标签范围）。
下面通过实际例子来一步一步地细说：
**拥有作用域插槽的组件定义（实际代码中组件要在根实例创建之前定义）：
Vue.component("list-tpl", {
props: ["list"],
template: `
<ul>
<li style="display:block;" v-for="(item, index) in list">
<slot :item="item"></slot> // item为向上层传递的数据，单个slot在调用时转化为作用域内的多个标签
</li>
</ul>
`
})
*根实例代码，主要包括测试数据：
var app = new Vue({
el: "#app",
data: {
list: [
{
name: "tate",
age: 26,
single: true, // 是否单身
stu: false // 是否是学生
},
{
name: "kevin",
age: 23,
single: true,
stu: true
},
{
name: "harden",
age: 28,
single: false,
stu: false
},
{
name: "Jimmy",
age: 29,
single: false,
stu: true
}
]
}
})
*最重要的 组件调用
<list-tpl :list="list">
<!-- 调用的时候 a 为临时变量，只用于获取数据 -->
<template slot-scope="a">
<!-- 若不加任何判断，整个template中的标签都会替换为定义时的slot -->
<h4>{{a.item.name}}</h4>
<h5>{{a.item.age}}</h5>
<!-- 技巧就在于通过a拿到的数据选择性地渲染标签，即修改单个slot对应的作用域范围 -->
<span v-if="a.item.single">我是单身</span>
<span v-if="a.item.stu">我是学生</span>
<span v-if="!a.item.single">我不是单身</span>
<span v-if="!a.item.stu">我不是学生</span>
</template>
</list-tpl>
综上：作用于插槽主要应用在：需要在实际调用组件时选择性渲染插槽内容，而不是在定义时用js写。
*下面看一下本例子的实际效果：
*本例的全部代码如下，可自行运行查看效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<slot-test>
<template slot="top">定制top</template>
</slot-test>
<list-tpl :list="list">
<!-- 调用的时候 a 为临时变量，只用于获取变量 -->
<template slot-scope="a">
<!-- 若不加任何判断，整个template中的标签都会替换为定义时的slot -->
<h4>{{a.item.name}}</h4>
<h5>{{a.item.age}}</h5>
<!-- 技巧就在于通过a拿到的数据选择性地渲染标签，即修改单个slot对应的作用域范围 -->
<span v-if="a.item.single">我是单身</span>
<span v-if="a.item.stu">我是学生</span>
<span v-if="!a.item.single">我不是单身</span>
<span v-if="!a.item.stu">我不是学生</span>
</template>
</list-tpl>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
Vue.component("slot-test", {
template: "<div>\
<slot name='top'>\
<p>默认top</p>\
</slot>\
<slot name='mid'>\
<p>默认mid</p>\
</slot>\
<slot name='bottom'>\
<p>默认bototm</p>\
</slot>\
</div>" })
Vue.component("list-tpl", {
props: ["list"],
template: `
<ul>
<li style="display:block;" v-for="(item, index) in list">
<slot :item="item"></slot> // item为向上层传递的数据，单个slot在调用时转化为作用域内的多个标签
</li>
</ul>
`
})
var app = new Vue({
el: "#app",
data: {
list: [
{
name: "tate",
age: 26,
single: true,
stu: false
},
{
name: "kevin",
age: 23,
single: true,
stu: true
},
{
name: "harden",
age: 28,
single: false,
stu: false
},
{
name: "Jimmy",
age: 29,
single: false,
stu: true
}
]
}
})
</script>
</body>
</html>
细说Vue作用域插槽，匹配应用场景。的更多相关文章
- vue作用域插槽的应用
问题场景: 存在一个列表,然后当鼠标放入列表中的名称上的时候,自动弹出简介,类似这种效果, 我们当然可以使用positon relative和absolute搭配达到这样的效果,但是现在有一个奇葩的问 ...
- 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 作用域插槽
使用场景:复用子组件的slot,又可以使slot的内容不一样. <!DOCTYPE html> <html lang="zh"> <head> ...
- vue中插槽的使用场景
效果图:
- vue作用域插槽实践
引言 我在练手的时候发现后端返回的数据可以通过两种方式渲染 (自己遇到的 可能你都会 哈哈哈) 后端传过来的数据函数 from django.http import JsonResponse def ...
随机推荐
- python标准库 - 数学库和随机数库
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们已经在Python运算中看到Python最基本的数学运算功能.此外,math包 ...
- Python 成仙之路
这个部分的所有内容,都是我学习Python过程中的学习笔记. 这个部分的所有内容,都是我学习Python过程中的学习笔记. 这个部分的所有内容,都是我学习Python过程中的学习笔记. 第一部分 p ...
- Application生命周期
onCreate 在创建应用程序时创建 onTerminate 当终止应用程序对象时调用,不保证一定被调用,当程序是被内核终止以便为其他应用程序释放资源,那么将不会提醒,并且不调用应用程序的对象的on ...
- SpringBoot使用其他的Servlet容器
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...
- 常用css样式(布局)
兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项 ...
- Python3学习笔记25-logging模块
logging模块,Python自带用来记录日志的模块. 因为工作需要用到关于日志的,最近一直都在看关于日志模块的东西,百度了很多文章,可惜都是看的让人一头雾水,最后运气不错,找到一篇很详细的文章.传 ...
- 017_mac格式化硬盘,mac如何格式化硬盘
想做一个mac和windows都能识别的系统,推荐设置成什么格式 一.在mac下格式化 在Mac 下,打开右下角应用程序-实用工具-磁盘工具,里面选取你的移动硬盘,然后进行格式化,设置成EXFat格式 ...
- MariaDB基于GTID主从复制及多主复制
一.简单主从模式配置步骤(必须要mysql5.6,此处以maridb10.0.10为例) 1.配置主从节点的服务配置文件 # vim /etc/my.cnf 1.1.配置master节点: [mysq ...
- mysql的日志及利用mysqldump备份及还原
日志文件:6类 一般查询日志:log,general_log,log_output 慢查询日志: 错误日志 二进制日志 中继日志 ...
- Android service与Thread
很多时候,你可能会问,为什么要用 Service,而不用 Thread 呢,因为用 Thread 是很方便的,比起 Service 也方便多了,下面我详细的来解释一下. 1). Thread:Thre ...