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 等各类 ...
随机推荐
- CCF-CSP题解 201403-4 无线网络
新建不超过\(k\)个无线路由器,求使路由器1.2连通最少的中间路由器. 首先常规建图,将相距不超过\(r\)的路由器(包括新建的)相连. 想到了分层\(dijkstra\).类似的,作\(bfs\) ...
- C# VS2010 windows服务的安装
可能是太过于懒惰的原因,研究个windows 服务的安装程序都花了大半天时间.在网上看了一些示例,大部分都言过其实,把过程搞得太过复杂,老是需要去研究如何利用InstallUtil.exe及其参数.事 ...
- 新手如何快速入门node.js
附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全: 书单导航页(点击右侧 极客侠栈 即可打开个人博客):极客侠栈 ①[Java]学习之路吐血整理技术书 ...
- 云服务器配置 docker java mysql mongodb redis nginx 环境
磁盘挂载 fdisk -l #查看磁盘列表 mkfs.ext4 /dev/vdb #格式化磁盘 mount /dev/vdb /data #挂载磁盘在/data echo '/dev/vdb /dat ...
- C# 利用AForge进行摄像头信息采集
概述 AForge.NET是一个专门为开发者和研究者基于C#框架设计的,提供了不同的类库和关于类库的资源,还有很多应用程序例子,包括计算机视觉与人工智能,图像处理,神经网络,遗传算法,机器学习,机器人 ...
- jQuery模仿ToDoList实现简单的待办事项列表
功能:在文本框中输入待办事项按下回车后,事项会出现在未完成列表中:点击未完成事项前边的复选框后,该事项会出现在已完成列表中,反之亦然:点击删除按钮会删除该事项:双击事项可以修改事项的内容.待办事项的数 ...
- 更改Android设备System目录的文件的写入权限
有时候我们需要修改/system目录中文件的权限,比如将该目录下的脚本设置写入权限等,但该目录默认只有read权限,此时应该怎么办? 1.安卓设备请确保root;2.连接安卓设备,确保安卓设备打开了“ ...
- Appium(五)：Desired Capabilities
1. Desired Capabilities Desired Capabilities简单来说就是一组设置,这些设置可以让测试脚本控制Appium的运行行为.下面就逐个对Desired Capabi ...
- C# sync/async 同步/异步
同步方法 Console.WriteLine($")} {DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.fff")}******* ...
- js-02-循环语句
循环语句分类{ for while do ( ) while } 一.for循环语句和for循环的嵌套 for循环格式eg: <script> var sim = 0; for(var i ...