65. Vue中的作用域插槽
时间:2022-07-24
本文章向大家介绍65. Vue中的作用域插槽,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
需求
上一篇章,我们讲解了Vue中插槽的基本使用方法,本篇章来讲解作用域查看的情况。这是一种什么情况呢?
简单来说就是使用 v-for
渲染插槽的数据传递情况,下面来具体示例说明一下。
示例说明
首先编写一个基础的代码,编写好一个子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中作用域插槽slot</title>
<!-- 1.导入vue.js -->
<script src="lib/vue.js"></script>
</head>
<body>
<!-- 2.创建app -->
<div id="app">
<child></child>
</div>
<!-- 3.创建vm -->
<script>
Vue.component("child", {
template: `<div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>`,
data(){
return {
list: [1,2,3,4,5,6]
}
},
});
let vm = new Vue({
el: "#app",
data: {},
})
</script>
</body>
</html>
在上面的代码中,子组件中的 ul
使用 v-for
遍历了一个 li
的结构,页面效果如下:
看到了这个结构之后,我们就可以理所当然地提出一个关于插槽方面的需求了。
作用域插槽的需求
如果我们想要遍历的并不是简单的 li
结构,而是希望在父元素编写来形成的 dom
结构,但是又需要从子组件中的数据来遍历。
那么如何将子组件的 data
数组传递到 父组件,然后让父组件来遍历编写 dom
结构呢?
作用域插槽的实现
第一步,首先将子组件的数据绑定到插槽 slot 的属性上
Vue.component("child", {
template: `<div>
<ul>
<slot v-for="item in list" v-bind:item="item"></slot>
</ul>
</div>`,
data(){
return {
list: [1,2,3,4,5,6]
}
},
});
第二步,使用 template 便签渲染 slot 插槽
<child>
<template slot-scope="props">
<li>{{props.item}} -- hello</li>
</template>
</child>
注意:
- 必须使用
template
标签编写 - 使用
slot-scope="props"
可以接收子组件绑定的数据
浏览页面效果如下:
那么此时遍历的效果就取决于父组件了。
作用域插槽的 vue 2.6 更新写法
上面已经基本实现了作用域插槽的基本使用,但是在 vue 2.6
版本开始,通过 slot-scope
的属性方式获取 props
值将会被逐步废弃。
更新的写法如下:
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
-
v-slot
绑定一个 slot 的命名 name,并且绑定子组件设置的参数。 - 其中 default 为默认的 slot 命名
修改一下上面的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中作用域插槽slot</title>
<!-- 1.导入vue.js -->
<script src="lib/vue.js"></script>
</head>
<body>
<!-- 2.创建app -->
<div id="app">
<child>
<template v-slot:default="props">
<li>{{props.item}} -- hello</li>
</template>
</child>
</div>
<!-- 3.创建vm -->
<script>
Vue.component("child", {
template: `<div>
<ul>
<slot v-for="item in list" v-bind:item="item"></slot>
</ul>
</div>`,
data(){
return {
list: [1,2,3,4,5,6]
}
},
});
let vm = new Vue({
el: "#app",
data: {},
})
</script>
</body>
</html>
- 利用回归模型预测数值型数据(代码)
- 关于ORA-00020问题的反思(r2笔记第3天)
- 查看空间使用情况的脚本(r2笔记第2天)
- 使用dbms_parallel_execute来完成DML的并行(r3笔记第1天)
- 有趣的linux命令总结(78天)
- 生产环境sql语句调优实战第七篇(r2笔记99天)
- 一个普通数据库用户所能查到的"意料之外"的信息(r2笔记98天)
- 查看并行进程的一些简单信息(r3笔记第17天)
- 多行数据的批处理之bulk collect(r3笔记第16天)
- pl/sql中错误的异常处理 (r3笔记第15天)
- 关于session leak的问题分析(r3笔记第13天)
- 执行计划的偏差导致的性能问题(r3笔记第12天)
- 关于评审开发人员的sql语句(r3笔记第11天)
- 性能下降的不定时炸弹_过旧的sql_profile(r3笔记第9天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 和小曼一起走到MySQL行的尽头
- 明亮解我“工厂模式无用”之惑
- 「源码分析」— 为什么枚举是单例模式的最佳方法
- 如何记忆 Spring Bean 的生命周期
- 系统学习Stream
- Java回调的四种写法(反射、直接调用、接口调用、Lamda表达式)
- 避开NullPointerException的10条建议
- REST服务,使用Dubbo还是SpringMVC?
- Linux系统下Anaconda的安装和使用教程
- Flutter Dojo设计之道——利用Github打造完善的开源项目
- 最强 Redis 客户端 lettuce 已支持 Redis6客户端
- 还在手动整理数据库文档?试试这个工具
- Elasticsearch 常见的 8 种错误及最佳实践
- Spark流式状态管理
- Scala中的IO操作及ArrayBuffer线程安全问题