Vue 从入门到进阶之路（十二）
之前的文章我们介绍了一下 vue 中插槽的使用，本章我们接着介绍一下 vue 中的作用域插槽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<child></child>
</div>
<script>
Vue.component("child", {
data() {
return {
list: ["aaa", "bbb", "ccc"]
}
},
template: `
<div>
<p v-for="(item,index) of list" :key="index">{{item}}</p>
</div>
`
});
var app = new Vue({
el: '#app',
})
</script>
</body>
</html>
在上面的代码中我们在子组件 child 中定义了一个 list 的数据，然后通过循环输出的形式把每一项输出在了一个 <p> 标签内，结果如下：
上面的代码显然符合我们之前的预期，但是现在有一个问题，我想让 list 数组内的数据不是放在 <p> 标签内，而是放在一个 <h1> 标签内，那这样的话我们就需要将 template 内的 <p> 标签换为 <h1> 标签，但是别的地方却需要使用 <p> 标签输出，这该怎么办，我们总不能写两个不同的子组件吧，官方为我们提供了作用于插槽来解决这个问题，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<child>
<template slot-scope="props">
<h1>{{props.item}}</h1>
</template>
</child>
</div>
<script>
Vue.component("child", {
data() {
return {
list: ["aaa", "bbb", "ccc"]
}
},
template: `
<div>
<slot v-for="(item,index) of list" :key="index" :item="item">{{item}}</slot>
</div>
`
});
var app = new Vue({
el: '#app',
})
</script>
</body>
</html>
我们将 template 内的 <p> 标签变为 <slot> 标签，然后在 <slot> 标签内加上一个 :item="item" 的属性，意思是将 item 内容通过 :item="" 的形式展示出去。
在 <child> 标签内加入一个 <template> 标签，标签内加入 slot-scope="props"，意思是通过 slot-scope="scope" 将 template 内的 slot 进行连接。
然后输出 <h1>{{props.item}}</h1> ，意思是将连接的 slot 内的展示出来的 :item 内的值展示出来，并且展示在 <h1> 标签内。
运行结果如下：
符合我们的预期，这样我们如果想让输出内容放在 <p> 标签内，只需要将 <h1> 标签改为 <p> 标签即可，不需要再去改动子组件。
Vue 从入门到进阶之路（十二）的更多相关文章
- Vue 从入门到进阶之路（十四）
之前的文章我们对 vue 的基础用法已经有了很直观的认识,本章我们来看一下 vue 中的生命周期函数. 上图为 Vue官方为我们提供的完整的生命周期函数的流程图,下面的案例我们只是走了部分情况流程,但 ...
- Vue 从入门到进阶之路（十三）
之前的文章我们介绍了一下 vue 中的作用域插槽,本章我们来看一下动态组件与 v-once 指令. <!DOCTYPE html> <html lang="en" ...
- Vue 从入门到进阶之路（十一）
之前的文章我们说了一下 vue 中组件的原生事件绑定,本章我们来所以下 vue 中的插槽使用. <!DOCTYPE html> <html lang="en"&g ...
- Java 从入门到进阶之路（二十）
在之前的文章我们介绍了一下 Java 中的包装类,本章我们来看一下 Java 中的日期操作. 在我们日常编程中,日期使我们非常常用的一个操作,比如读写日期,输出日志等,那接下来我们就看一下 Java ...
- Java 从入门到进阶之路（二十二）
在之前的文章我们介绍了一下 Java 中的 集合框架中的Collection 中的一些常用方法,本章我们来看一下 Java 集合框架中的Collection 的迭代器 Iterator. 当我们创建 ...
- Java 从入门到进阶之路（二十四）
在之前的文章我们介绍了一下 Java 中的 集合框架中的Collection 的泛型,本章我们来看一下 Java 集合框架中的Collection 的子接口 List. Collection 接口有 ...
- Java 从入门到进阶之路（二十五）
在之前的文章我们介绍了一下 Java 中的 集合框架中的Collection 的子接口 List的 增删改查和与数组间相互转换的方法,本章我们来看一下 Java 集合框架中的Collection 的 ...
- Java 从入门到进阶之路（二十六）
在之前的文章我们介绍了一下 Java 中的 集合框架中的Collection 的子接口 List,本章我们来看一下 Java 集合框架中的Collection 的子接口 Queue. 在之前我们讲 ...
- Java 从入门到进阶之路（二十八）
在之前的文章我们都是通过 Java 在内存中应用,本章开始我们来看一下 Java 在系统文件(硬盘)上的操作. 系统文件就是我们电脑中的文件,简单来说就是像 Windows 系统中 C D E 等各类 ...
随机推荐
- django----多对多三种创建方式 form组件
目录 多对多三种创建方式 全自动 全手动 半自动 form组件 基本使用 form_obj 及 is_valid() 前端渲染方式 取消前端自动校验 正则校验 钩子函数(Hook方法) cleaned ...
- 算法题-Z 字形变换
描述 将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" 行数为 3 时,排列如下: L C I R ...
- 【CV现状-2】三维感知
#磨染的初心--计算机视觉的现状 [这一系列文章是关于计算机视觉的反思,希望能引起一些人的共鸣.可以随意传播,随意喷.所涉及的内容过多,将按如下内容划分章节.已经完成的会逐渐加上链接.] 缘起 三维感 ...
- iOS核心动画高级技巧-4
8. 显式动画 显式动画 如果想让事情变得顺利,只有靠自己 -- 夏尔·纪尧姆 上一章介绍了隐式动画的概念.隐式动画是在iOS平台创建动态用户界面的一种直接方式,也是UIKit动画机制的基础,不过它并 ...
- zip,rar及linux下常用的压缩格式
日常操作中我们经常使用到文件压缩操作,其使用一些特定的算法来减小文件的大小,可以提高传输数据时的速率和减少数据在一些存储机制上占有的空间大小,实现空间利用最大化. 比如:如果你想通过邮箱发送一个文件夹 ...
- leetcode菜鸡斗智斗勇系列（1）---把一个链表中的二进制数字转换为一个整型数（int）
Convert Binary Number in a Linked List to Integer这道题在leetcode上面算作是“easy”,然而小生我还是不会做,于是根据大佬的回答来整理一下思路 ...
- jimdb压测踩坑记
本文记录在jimdb压测过程中遇到的各种小坑,望能够抛砖引玉. 1.压测流量起来后,过了5分钟左右,发现ops突降,大概降了三分之一,然后稳定了下来 大概原因:此种情况,jimdb极有可能某个分片的连 ...
- SpringCloud路由网关Zuul
一.什么是网关 Zuul的主要功能是路由转发和过滤器.路由功能是微服务的一部分,比如/api/user转发到到user服务,/api/shop转发到到shop服务.zuul默认和Ribbon结合实现了 ...
- IT兄弟连 HTML5教程 CSS3属性特效 边框
通过CSS3,我们能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框.并且不需使用设计软件,比如photoshop. 1 边框图片border-image border-image为边框应用图片, ...
- Cross-Site Scripting:Reflected 跨站点脚本：获取