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 等各类 ...
随机推荐
- Redis Cluster 的数据分片机制
上一篇<分布式数据缓存中的一致性哈希算法> 文章中讲述了一致性哈希算法的基本原理和实现,今天就以 Redis Cluster 为例,详细讲解一下分布式数据缓存中的数据分片,上线下线时数据迁 ...
- Docker从入门到掉坑(四)：上手k8s避坑指南
在之前的几篇文章中,主要还是讲解了关于简单的docker容器该如何进行管理和操作,在接下来的这篇文章开始,我们将开始进入对于k8s模块的学习 不熟悉的可以先回顾之前的章节,Docker教程系列文章将归 ...
- idea创建Maven版的ssm项目
要使用idea创建一个maven项目,首先电脑安装maven,maven下载地址:http://maven.apache.org/download.cgi 1.打开idea,选择创建一个新项目,选择m ...
- composer入门 一些简单常用的命令介绍
composer是什么 composer是PHP的插件依赖管理工具,我个人感觉和java的Maven.Gradle很类似. Windows OS下安装composer 参考: https://www. ...
- Java方法之重载
Java方法之重载 本篇探究Java中的方法重载.那么,什么是重载呢?先上一串代码: package com.my.pac06; /** * @author Summerday * @date 201 ...
- 使用pycharm或idea提交项目到github
pycharm和idea的操作方式几乎一样,所以下面就以pycharm为例来介绍. 安装git https://git-scm.com/download/win 官网,下载慢,需翻墙 https:// ...
- 关于c# winform 键盘响应右边键盘消息响应事件的上下左右方向键没有反应
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11835642.html 记录一下这个小坑,c# winform 键盘响应右边键盘的上下左右方向 ...
- Koa 本地搭建 HTTPS 环境
openssl 首先本地需要安装 openssl,用于生成自签名证书. $ brew install openssl 检查安装: $ openssl version LibreSSL 2.6.5 生成 ...
- CefSharp 修复Demo无法在其它路径下启动问题
CefSharp编译后,在直接点击打开CefSharp.Wpf.Example.exe,启动没问题但是复制demo包到其它路径下,无法打开demo.原因:代码中含有相对路径下的资源文件引用. CefS ...
- ES6 ... 展开&收集运算符
...展开&收集运算符,也就是说他可以干两件事情,展开和收集 一:收集,顾名思义把散列东西收集到一个地方,这个地方ES6规定收集在数组中 例如:下面函数fn将传递的参数收集在arg变量中,打印 ...