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 等各类 ...
随机推荐
- 《Java基础知识》Java访问修饰符（访问控制符）
Java 通过修饰符来控制类.属性和方法的访问权限和其他功能,通常放在语句的最前端.例如: public class className { // body of class } private bo ...
- 两个实例轻松理解js函数预解析
js函数预解析 例子1: 先上一段代码,看看能不能写出最终的执行结果. console.log(a); var a = 1; console.log(a); function a(){ console ...
- .Net Core2.2升级到3.1小记
.NET Core 3.1 作为LTS长期支持版本,会提供3年的支持(明年就出.net5),值得升级(吗). 目前主流的第三方包大多都已经提供了支持,2.x => 3.1还是变化不是特别多,EF ...
- 深度学习优质学习项目大放送！-AI Studio精选开源项目合集推荐
近期 在AI Studio上发现了不少优质的开源深度学习项目,从深度学习入门到进阶,涵盖了CV.NLP.生成对抗网络.强化学习多个研究方向,还有最新的动态图,都以NoteBook的方式直接开源出来,并 ...
- 4.Redux学习4----react-redux
react-redux是配合redux一起使用的,其中核心组件是Provider Provider是store的提供器,用Provider则store就无需直接引入组件内,而且还可以将一个store公 ...
- opencv检测图像直线
#include<opencv2/opencv.hpp> #include<iostream> using namespace std; using namespace cv; ...
- Python中的四种交换数值的方法
交换两个变量的值方法,这个面试题如果只写一种当然很简单,没什么可以说的. 今天这个面试是问大家有几种办法来实现交换两个变量的值. 在没开始看具体答案前,你可以先想想看 下面分别来说说这几种方法 方法一 ...
- Leetcode题解 - 双指针求n数之和
1. 两数之和 """ 双指针,题目需要返回下标,所以记录一个数字对应的下标 """ class Solution: def twoSum( ...
- 避免网络爬虫IP被封的策略
背景 这两天一直在搞Java网络爬虫作为Java课程设计,目标是爬取豆瓣电影top250的影评,之后可能还需要进行情感分析,当然这就不是爬虫的内容了.我的爬虫程序在一开始只是一个页面一个页面的爬取信息 ...
- WebShell代码分析溯源(十)
WebShell代码分析溯源(十) 一.一句话变形马样本 <?php $e = $_REQUEST['e'];register_shutdown_function($e, $_REQUEST[' ...