第二十三节:带你梳理Vue2:Vue插槽的认识和基本使用
前言:
通过上一节的学习,我们知道了如何将数据从父组件中传递到子组件中, 除了除了将数据作为props传入到组件中,Vue还允许传入HTML,
Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot>
元素作为承载分发内容的出口。
至于<slot>
是什么我们一步一步往下看.
先来看一个需求
首先你想创建一个通用性的按钮, 按钮的内容是使用的时候来决定,我们可能会通过一个属性来设置按钮的文本,例如
<div id="app"><!-- 使用组件 --><my-button text="按钮"></my-button><my-button text="提交"></my-button>
</div><script>// 组件选项对象let MyButton = {props:["text"],template: `<button>{{ text }}</button>`,};// 实例中注册组件const vm = new Vue({el:"#app",components: {MyButton,}})</script>
这个时候在调用组件的时候,传入不同的text属性值, 按钮就会有不同值
这样自然能满足我们的需求, 不过下面这种组件写法会显得更加自然
<div id="app"><!-- 使用组件 --><my-button>按钮</my-button><my-button>提交</my-button>
</div>
如果想让组件嵌套的内容显示在子组件模板中, 就需要使用slot
插槽
真正了解插槽之前,我们先认识一下编译作用域
1. 编译作用域
通过前面的学习,我们都知道了,父子组件是有不同的模板和各自独立的作用域, 每一个组件在实例化的时候作用域都是孤立的,
那么如此一来,当在父组件中使用子组件时,子组件中嵌套的内容是在哪个作用域里编译呢?
如下示例:
<div id="app"><!-- 使用组件 --><my-child>{{ msg }}</my-child>
</div><script>// 组件选项对象let MyChild = {template: `<button>按钮</button>`,data(){return {msg: "hello"}}};// 实例中注册组件const vm = new Vue({el:"#app",data:{msg:"你好"},components: {MyChild,}})</script>
此时组件中嵌套的msg
究竟是在父组件中的作用域中编译还是在子组件作用域编译呢?这涉及到msg
使用的是父组件的数据还是子组件的数据
答案是父组件。组件作用域简单地说是:
父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。
所以一个比较常见的错误,就是在父组件模板内将一个指令绑定到子组件内部的属性/方法
例如:
<div id="app"><!-- 使用组件 --><my-child v-show="isShow"></my-child>
</div><script>// 组件选项对象let MyChild = {template: `<button>按钮</button>`,data(){return {isShow: false}}};// 实例中注册组件const vm = new Vue({el:"#app",components: {MyChild,}})</script>
isShow是子组件中的数据, 这样会报错, 因为父组件模板并不能感知到子组件的状态,
如果需要绑定到子组件作用域内的数据,就可以将指令绑定在子组件的根节点上,
如下正确的写法
<div id="app"><!-- 使用组件 --><my-child></my-child>
</div><script>// 组件选项对象let MyChild = {template: `<button v-show="isShow">按钮</button>`,data(){return {isShow: false}}};// 实例中注册组件const vm = new Vue({el:"#app",components: {MyChild,}})</script>
现在我们对于编译作用域就有了一定的了解,
那么回到我们当初的问题, 在父组件模板中使用子组件时在子组件中嵌套的内容是属于父组件的编译,但是我有希望这个内容能在子组件中使用,我们就需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发 。
2. 插槽的基本使用
原来在组件里面是不能写内容的,因为会被模板替换的,现在有了插槽以后,我们就可以在组件里定制内容
2.1 插入基本的文本内容
还是刚才的实例,为了能让我们在子组件中嵌套的文本在子组件模板中使用,我们就需要在子组件模板中使用插槽
<div id="app"><!-- 使用组件 --><my-child >按钮</my-child><my-child >{{ text }}</my-child>
</div><script>// 组件选项对象let MyChild = {template: `<button><slot><slot></button>`};// 实例中注册组件const vm = new Vue({el:"#app",data:{text: "注册"},components: {MyChild,}})</script>
使用插槽的结果
这样我们就可以很方便的在父组件中,通过slot
插槽像子组件模板中分发内容,
再次思考, 除了可以插入文本内容, 那么是不是也可以插入DOM标签呢?
那么接着往下看.
2.2 插入DOM标签
我们除了可以在插槽上插入普通的文本,我们还可以在插槽上插入DOM标签
示例代码如下:
<div id="app"><mydio><h1>是否删除?</h1></mydio><mydio><span>是否确认?</span></mydio>
</div><!--模板中只有一个根元素,插槽可以通过元素的属性定制模板-->
<template id="myalert"><div><slot></slot></div>
</template><script>const mydio = {template: '#myalert',};var vm = new Vue({ // 根实例el: '#app',components: {mydio},});
</script>
显示结果
通过结果,我们成功的将DOM元素插入了子组件模板中.
那么slot
插槽还有哪些秘密呢?接着看
3. 插槽默认内容
但是不是每一次使用子组件的时候,都会插入内容, 如果没有插入内容,插槽的位置将什么都不会显示,
如果我们需要在使用子组件时未插入内容时. 显示一段默认的内容,我们就可以将默认的内容嵌套在slot 标签中,
这就是插槽的备用内容
, 备用内容在子组件的作用域内编译. 并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。
同样使用按钮的示例:
<div id="app"><!-- 使用组件 --><my-child ></my-child><my-child >{{ text }}</my-child>
</div>
<script>// 组件选项对象let MyChild = {template: `<button><slot>默认内容</slot></button>`};// 实例中注册组件const vm = new Vue({el:"#app",data:{text: "注册"},components: {MyChild,}})</script>
显示结果
这样就算在使用子组件没有分发内容, 页面的按钮也不会是空的
相关文章:

第二十三节:带你梳理Vue2:Vue插槽的认识和基本使用
前言: 通过上一节的学习,我们知道了如何将数据从父组件中传递到子组件中, 除了除了将数据作为props传入到组件中,Vue还允许传入HTML, Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发…...

父亲节马上到了-和我一起用Python写父亲节的祝福吧
前言 让我们一起用Python写一段父亲节的祝福吧 📝个人主页→数据挖掘博主ZTLJQ的主页 个人推荐python学习系列: ☄️爬虫JS逆向系列专栏 - 爬虫逆向教学 ☄️python系列专栏 - 从零开始学python 话不多说先上代码 import tkinter as tk from doctest imp…...

winform 应用程序 添加 wpf控件后影响窗体DPI改变
第一步:添加 应用程序清单文件 app.manifest 第二步:把这段配置 注释放开,第一个配置true 改成false...
Web前端开发素材:探索、选择与应用的艺术
Web前端开发素材:探索、选择与应用的艺术 在Web前端开发的广袤领域中,素材的选择与应用无疑是一项至关重要的技能。它们如同构建网页的砖石,既承载着设计的美感,又影响着用户体验的深度。本文将从四个方面、五个方面、六个方面和…...

LeetCode | 20.有效的括号
这道题就是栈这种数据结构的应用,当我们遇到左括号的时候,比如{,(,[,就压栈,当遇到右括号的时候,比如},),],就把栈顶元素弹出,如果不匹配,则返回False,当遍历完所有元素后…...
ceph scrub 错误记录
目的 记录 ceph scrub 错误问题解决 ceph scrub 故障故障信息 cluster:id: xxx-xxx-xxxhealth: HEALTH_ERR2 scrub errorsPossible data damage: 2 pg inconsistentmessage 日志信息 # egrep -i medium|i\/o error|sector|Prefailure /var/log/messages Jun 15 00:23:37 m…...

cs与msf权限传递,以及mimikatz抓取明文密码
cs与msf权限传递,以及mimikatz抓取win10明文密码 1、环境准备2、Cobalt Strike ------> MSF2.1 Cobalt Strike拿权限2.2 将CS权限传递给msf 3、MSF ------> Cobalt Strike3.1 msf拿权限3.2 将msf权限传递给CS 4、使用mimikatz抓取明文密码 1、环境准备 攻击&…...

Windows下的zip压缩包版Mysql8.3.0数据迁移到Mysql8.4.0可以用拷贝data文件夹的方式
Windows下的zip压缩包版Mysql8.3.0数据迁移到Mysql8.4.0可以用拷贝data文件夹的方式 拷贝后, 所有账户和数据都是一样的 步骤 停止MySQL服务 net stop mysql 或 sc.exe stop mysql net stop mysqlsc.exe stop mysql卸载 Mysql8.3.0 的服务 mysqld remove 或 mysqld remove m…...

软件体系结构笔记(自用)
来自《软件体系结构原理、方法与实践(第三版)》清华大学出版社 张友生编著 1-8章12章 复习笔记 如有错误,欢迎指正!!!...

java安装并配置环境
安装前请确保本机没有java的残留,否则将会安装报错 1.安装java jdk:安装路径Java Downloads | Oracle 中国 百度网盘链接:https://pan.baidu.com/s/11-3f2QEquIG3JYw4syklmQ 提取码:518e 2.双击 按照流程直接点击下一步&#x…...

探索互联网寻址机制 | 揭秘互联网技术的核心,解析网络寻址
揭秘互联网技术的核心,解析网络寻址题 前提介绍局域网地址IP地址的分配方式动态IP分配机制内部网(intranet)ICANN负责IP分配DHCP协议获取IP地址 域名系统域名是什么域名工作方式hosts文件存储域名映射关系DNS分布式数据库DNS域名解析 Java进行…...

C语言学习笔记之结构篇
C语言是一门结构化程序设计语言。在C语言看来,现实生活中的任何事情都可看作是三大结构或者三大结构的组合的抽象,即顺序,分支(选择),循环。 所谓顺序就是一条路走到黑;生活中在很多事情上我们都…...

C++笔记之一个函数多个返回值的方法、std::pair、std::tuple、std::tie的用法
C++笔记之一个函数多个返回值的方法、std::pair、std::tuple、std::tie的用法 —— 2024-06-08 杭州 code review! 文章目录 C++笔记之一个函数多个返回值的方法、std::pair、std::tuple、std::tie的用法一.从一个函数中获取多个返回值的方法1. 使用结构体或类2. 使用`std::t…...

GDB:从零开始入门GDB
目录 1.前言 2.开启项目报错 3.GDB的进入和退出 4.GDB调试中查看代码和切换文件 5.GDB调试中程序的启动和main函数传参 6.GDB中断点相关的操作 7.GDB中的调试输出指令 8.GDB中自动输出值指令 9.GDB中的调试指令 前言 在日常开发中,调试是我们必不可少的技能。在专业…...

服务器权限管理
我们linux服务器上有严格的权限等级,如果权限过高导致误操作会增加服务器的风险。所以对于了解linux系统中的各种权限及要给用户,服务等分配合理的权限十分重要。(权限越大,责任越大) 1.基本权限 U--user用户,G-group…...

08 SpringBoot 自定定义配置
SpringBoot自定义配置有三种方式: 使用PropertySource进行自定义配置 使用ImportResource进行自定义配置 使用Configuration进行自定义配置 PropertySource 如果将所有的配置都集中到 application.properties 或 application.yml 中,那么这个配置文…...
Java之3DES(Triple DES)加密计算(DESede/ECB/ZeroPadding)
Java环境本身并不直接支持DESede/ECB/ZeroPadding。 不过,可以通过以下几种方式来实现DESede/ECB/ZeroPadding: 手动实现填充和去除填充:如前面示例代码所示,在加密之前进行填充,在解密之后去除填充。这是一个通用的方…...
从0开发一个Chrome插件:项目实战——广告拦截插件
前言 这是《从0开发一个Chrome插件》系列的第十七篇文章,本系列教你如何从0去开发一个Chrome插件,每篇文章都会好好打磨,写清楚我在开发过程遇到的问题,还有开发经验和技巧。 专栏: 从0开发一个Chrome插件:什么是Chrome插件?从0开发一个Chrome插件:开发Chrome插件的必…...

C++ 32 之 静态成员函数
#include <iostream> #include <string> using namespace std;// 特点: // 1.在编译阶段就分配了内存空间 // 2.类内声明,在类外进行初始化 // 3.所有对象共享一份静态成员数据 class Students02{ public:int s_c;static int s_d;// 静态成员函数&#…...
Python闯LeetCode--第1题:两数之和
Problem: 1. 两数之和 文章目录 思路解题方法复杂度Code 思路 看到这道题第一思路就是暴力破解,枚举,两个for循环遍历,直到找到满足要求的答案。主要因题目假设只有一组满足结果的答案,因此难度大大降低,作为第一道题&…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...

如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...

1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

python执行测试用例,allure报乱码且未成功生成报告
allure执行测试用例时显示乱码:‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展,AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术,在客户服务、营销推广、信息查询等领域发挥着越来越重要…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...