64. Vue中的插槽slot
需求
在Vue的组件开发中,有些情况组件中的 html 内容是需要通过父组件判断之后,才能有确认的。没有理由对于父组件的判断编写多个存在一定重复代码的组件来进行切换吧!这时候就需要使用到插槽 slot 了。
下面来写一个代码示例,讲解一下这种情况以及插槽 slot 的基本使用。
父子组件传递dom元素使用问题的示例
首先编写一个基础的代码,要求有一个子组件
<!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><h1>hello world</h1></div>"
});
let vm = new Vue({
el: "#app",
data: {},
})
</script>
</body>
</html>
在上面的代码中,我写了一个简单的全局组件 child
,现在页面上展示如下:
假设我需要通过父元素将一部分 html 内容传递到组件中使用,如果不使用 slot 的话,该怎么操作呢?
使用父子组件props方式传递 html 内容
<child content="<h2>父组件传递的内容</h2>"></child>
Vue.component("child", {
props: ['content'],
template: "<div><h1>hello world</h1> {{content}} </div>"
});
此时,我们来看看页面显示 content 的内容,如下:
可以发现,我们的html内容并不能直接显示,而只是显示文本信息,没有html标签效果。那么就需要 v-html
来设置处理了。
在子组件中使用 v-html 来显示
Vue.component("child", {
props: ['content'],
template: `<div>
<h1>hello world</h1>
<div v-html="content"></div>
</div>`
});
页面显示效果如下:
这时候效果是出来了,但是可以看到这样去写其实非常麻烦。而且组件还要被一个 div 包裹才能显示。那么能不能用 template
标签来包括,去掉 div
呢?
尝试使用 template 标签包括,去掉 div
此时页面的显示如下:
也就是说,按照这种方式,我们必须用 div 之类的 html 标签来包裹,然后使用 v-html
才能正常显示了。
但是这种写法体验肯定不好,此时就可以使用 插槽 slot 语法。
slot的基本使用
使用插槽 slot 传递父组件的 dom 元素
<child>
<h2>父组件传递的内容</h2>
</child>
Vue.component("child", {
template: `<div>
<h1>hello world</h1>
<slot></slot>
</div>`
});
效果如下:
可以看到直接就显示了html内容,并不需要 div 包裹、 props 参数传递等等。
定义插槽的默认内容
有些情况,可能父组件是不会去传递插槽的内容的,这时候我们就需要给插槽设置一个默认值,如下:
浏览器显示如下:
命名 slot 的基本使用
上面我们解释了slot 的基本使用,这里还有更多的需求在里面。如果,我写一个后台管理页面的内容组件,一般都会分为 header、center、footer 上中下三大区域内容。
其中 header 和 footer 是根据父组件变化的,也就是说可以将这两个区域设置为插槽 slot。下面来实现一下基础效果。
使用多个slot 的基础效果
页面显示如下:
现在是正常显示默认值的,但是,我们怎么针对特定的 slot 设置 dom 元素呢?
尝试直接设置 slot 元素
页面效果如下:
可以看到此时就会同时将所有的 dom 元素传递到 全部的 slot 中。当然,这并不是我们想要的效果。
使用命名插槽 slot 解决多个 slot 传递问题
<child>
<h1 slot="header">header内容</h1>
<h1 slot="footer">fooster内容</h1>
</child>
Vue.component("child", {
template: `<div>
<slot name="header">header内容默认值</slot>
<h1>center中间区域</h1>
<slot name="footer">footer内容默认值</slot>
</div>`
});
页面效果如下:
可以看到,通过命名 slot,可以将对应的内容放入对应的插槽中。
命名 slot 的更新写法
上面的命名 slot 写法是已经准备舍弃的写法,虽然还可以使用。更新的写法将采用:
在一个 template
元素上使用 v-slot
指令,并以 v-slot
的参数的形式提供其插槽slot 名称name
<template v-slot:header>
<h1>header内容</h1>
</template>
<slot name="header">header内容默认值</slot>
修改写法之后的完整代码如下:
<!DOCTYPE html>
<html lang="en" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<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:header>
<h1>header内容</h1>
</template>
<template v-slot:footer>
<h1>fooster内容</h1>
</template>
</child>
</div>
<!-- 3.创建vm -->
<script>
Vue.component("child", {
template: `<div>
<slot name="header">header内容默认值</slot>
<h1>center中间区域</h1>
<slot name="footer">footer内容默认值</slot>
</div>`
});
let vm = new Vue({
el: "#app",
data: {},
})
</script>
</body>
</html>
- MySQL MVCC(多版本控制)
- 如何在集群外节点跨网段向HDFS写数据
- 如何使用HAProxy实现Kerberos环境下的Impala负载均衡
- Hue中使用Oozie创建Shell工作流在脚本中切换不同用户
- Python学习(七):模块 优雅的封装
- 非Kerberos环境下Kafka数据到Flume进Hive表
- 6.如何为Hue配置OpenLDAP认证
- Socket 通信原理
- PHP 面试知识梳理
- 5.如何为Impala配置OpenLDAP认证
- 传统Spring项目使用FeignClient组件访问微服务
- 4. 如何为Hive配置OpenLDAP认证
- 3.如何实现OpenLDAP的主主同步
- 2.OpenLDAP集成SSH登录并使用SSSD同步用户
- 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 数组属性和方法
- 3分钟短文:书接上回,Laravel数据库迁移的那些个小技巧
- 解密 Docker 挂载文件,宿主机修改后容器里文件没有修改
- SAP Spartacus的单元测试目录结构
- 突击并发编程JUC系列-并发工具 CyclicBarrier
- 详解 | Linux系统是如何实现存储并读写文件的?
- Angular单元测试的一个错误消息
- Python进行特征提取
- dotnet OpenXML 元素 cNvPr NonVisual Drawing Properties 的属性作用
- Java 对象相关面试题
- 【每日一题】【vue2源码学习】VUE中模版编译原理
- 【每日一题】【vue2源码学习】对VUE响应式数据的理解
- ApacheCN 深度学习译文集 2020.9
- 当Docker遇到Intellij IDEA,再次解放了生产力~
- 基于NPOI的Excel导入导出类库
- 在tinycolinux32上装tinycolinux64 kernel和toolchain