vue 通过插槽来分配内容

通过插槽来分配内容

一些情况下我们会希望能和 HTML 元素一样向组件中传递内容:

<AlertBox>Something bad happened.
</AlertBox>

这可以通过 Vue 的自定义 <slot> 元素来实现:

<template><div class="alert-box"><strong>This is an Error for Demo Purposes</strong><slot /></div>
</template><style scoped>
.alert-box {/* ... */
}
</style>

如上所示,我们使用 <slot> 作为一个占位符,父组件传递进来的内容就会渲染在这里。

动态组件​

有些场景会需要在两个组件间来回切换,比如 Tab 界面:

 

上面的例子是通过 Vue 的 <component> 元素和特殊的 is attribute 实现的:

<!-- currentTab 改变时组件也改变 -->
<component :is="tabs[currentTab]"></component>

 

在上面的例子中,被传给 :is 的值可以是以下几种:

  • 被注册的组件名
  • 导入的组件对象

你也可以使用 is attribute 来创建一般的 HTML 元素。

当使用 <component :is="..."> 来在多个组件间作切换时,被切换掉的组件会被卸载。我们可以通过 <KeepAlive> 组件强制被切换掉的组件仍然保持“存活”的状态。

DOM 内模板解析注意事项​

如果你想在 DOM 中直接书写 Vue 模板,Vue 则必须从 DOM 中获取模板字符串。由于浏览器的原生 HTML 解析行为限制,有一些需要注意的事项。

大小写区分​

HTML 标签和属性名称是不分大小写的,所以浏览器会把任何大写的字符解释为小写。这意味着当你使用 DOM 内的模板时,无论是 PascalCase 形式的组件名称、camelCase 形式的 prop 名称还是 v-on 的事件名称,都需要转换为相应等价的 kebab-case (短横线连字符) 形式:

// JavaScript 中的 camelCase
const BlogPost = {props: ['postTitle'],emits: ['updatePost'],template: `<h3>{{ postTitle }}</h3>`
}
<!-- HTML 中的 kebab-case -->
<blog-post post-title="hello!" @update-post="onUpdatePost"></blog-post>

 

闭合标签​

我们在上面的例子中已经使用过了闭合标签 (self-closing tag):

<MyComponent />

 

这是因为 Vue 的模板解析器支持任意标签使用 /> 作为标签关闭的标志。

然而在 DOM 内模板中,我们必须显式地写出关闭标签:

<my-component></my-component>

这是由于 HTML 只允许一小部分特殊的元素省略其关闭标签,最常见的就是 <input> 和 <img>。对于其他的元素来说,如果你省略了关闭标签,原生的 HTML 解析器会认为开启的标签永远没有结束,用下面这个代码片段举例来说:

<my-component /> <!-- 我们想要在这里关闭标签... -->
<span>hello</span>

将被解析为:

<my-component><span>hello</span>
</my-component> <!-- 但浏览器会在这里关闭标签 -->

元素位置限制​

某些 HTML 元素对于放在其中的元素类型有限制,例如 <ul><ol><table> 和 <select>,相应的,某些元素仅在放置于特定元素中时才会显示,例如 <li><tr> 和 <option>

这将导致在使用带有此类限制元素的组件时出现问题。例如:

<table><blog-post-row></blog-post-row>
</table>

自定义的组件 <blog-post-row> 将作为无效的内容被忽略,因而在最终呈现的输出中造成错误。我们可以使用特殊的 is attribute 作为一种解决方案:

<table><tr is="vue:blog-post-row"></tr>
</table>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/781535.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安装和使用 Oracle Database 23c 容器鏡像

Oracle Database 23c 是 Oracle 最新的数据库版本&#xff0c;它带来了许多新特性和性能改进。 对于开发者来说&#xff0c;Oracle 提供了一个免费的开发者版&#xff0c; 可以通过 Docker 容器轻松安装和使用。以下是详细的安装和使用指南。 安装 Docker 在开始之前&#xff0…

Linux解压安装Kafka

Linux解压安装Kafka MacBook Linux安装zookeeper MacBook Linux安装Kafka Kafka依赖Zookeeper Kafka依赖Zookeeper,可以单独安装Zookeeper,也可以直接启动Kafka包里自带的Zookeeper Kafka 安装 cd /data/software#下载 wget http://mirror.bit.edu.cn/apache/kafka/2.0.1…

2024 年多链代币开发对您的业务有何好处

2024 年&#xff0c;多链代币开发将成为寻求增强数字化影响力并释放区块链领域新机遇的企业的关键战略。通过利用多个区块链&#xff0c;公司可以显着提高其代币的可扩展性、互操作性和安全性。这种方法不仅提高了交易速度并降低了费用&#xff0c;还使企业能够利用更广泛的用户…

深度学习入门简单实现一个神经网络

实现一个三层神经网络 引言测试数据 代码 引言 今天我们实现一个简单的神经网络 俩个输入神经元 隐藏层两个神经元 一个输出神经元 激活函数我们使用sigmoid 优化方法使用梯度下降 我们前期准备是需要把这些神经元的关系理清楚 x1&#xff1a;第一个输入 x2&#xff1a;第二个…

C#手术麻醉系统源码 大型医院手麻系统4大需求是什么?

C#手术麻醉系统源码 大型医院手麻系统4大需求是什么&#xff1f; 手术麻醉临床信息系统有着完善的临床业务功能&#xff0c;能够涵盖整个围术期的工作&#xff0c;能够采集、汇总、存储、处理、展 现所有的临床诊疗资料。通过该系统的实施&#xff0c;能够规范手麻科的工作流程…

Manticore Search 中文分词搜索入门

Manticore Search 3.1.0 版引入了一种基于ICU 文本分割算法的中文文本分割新方法,该算法遵循第二种方法 - 基于字典的分割。 ICU 是一组开源库&#xff0c;为软件应用程序提供 Unicode 和全球化支持。与许多其他功能一起&#xff0c;它解决了文本边界确定的任务。 ICU 算法在文…

Matlab-写入mhd和raw医学图像处理格式文件

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 mhd和raw是什么&#xff1f; MHD&#xff08;MetaImage&#xff09;和RAW&#xff08;Raw Image Data&#xff09;是用于医学图像…

算法---二分算法

一:二分法算法分析 1、二分查找算法定义 二分查找又称折半查找,它是一种效率较高的查找方法。 二分查找要求:线性表是有序表,即表中结点按关键字有序,并且要用向量作为表的存储结构。 2、基本思想 (1)首先确定该区间的中点位置 (2)将待查的K值与R[mid]比较:若相等…

机器学习实验------AGNES层次聚类方法

机器学习 — AGNES层次聚类方法 第1关:距离的计算 任务描述 本关任务:根据本关所学知识,完成calc_min_dist函数,calc_max_dist函数以及calc_avg_dist函数分别实现计算两个簇之间的最短距离、最远距离和平均距离。 import numpy as np def calc_min_dist(cluster1, clus…

【测试工具】JMeter接口测试的简单使用

事先声明&#xff1a;博主的JMeter是3.3版本的&#xff0c;可能和最新版本的操作有些许差别 测试前的准备工作 1、先添加一个线程组&#xff1a;右击“测试计划”&#xff0c;点击“添加”—》“Threads(Users)”—》“线程组” 2、再添加一个HTTP请求&#xff0c;右击“线程…

基于Hive大数据分析springboot为后端以及vue为前端的的民宿系

标题基于Hive大数据分析springboot为后端以及vue为前端的的民宿系 本文介绍了如何利用Hive进行大数据分析,并结合Spring Boot和Vue构建了一个民宿管理系统。该民民宿管理系统包含用户和管理员登陆注册的功能,发布下架酒店信息,模糊搜索,酒店详情信息展示,收藏以及对收藏的…

Pillow教程03:图像处理的基本步骤+分离split+合并merge+混合blend+composite遮罩

--------------Pillow教程集合--------------- Python项目18&#xff1a;使用Pillow模块&#xff0c;随机生成4位数的图片验证码 Python教程93&#xff1a;初识Pillow模块&#xff08;创建Image对象查看属性图片的保存与缩放&#xff09; Pillow教程02&#xff1a;图片的裁剪…

烫烫烫手的结构体大小计算来咯,很烫哦,慢慢消化。自定义类型(一)

emmm&#xff0c;在这炎热的夏天在宿舍吹着空调写着博客也是一件不错的事呢&#xff0c;今天就来来好好盘一下C语言中的自定义类型。 常常会回顾努力的自己&#xff0c;所以要给自己的努力留下足迹。 为今天努力的自己打个卡&#xff0c;留个痕迹吧 2024.03.29 小闭 目录 …

C++项目——集群聊天服务器项目(九)客户端异常退出业务

服务器端应检测到客户端是否异常退出&#xff0c;因此本节来实现客户端异常退出&#xff0c;项目流程见后文 一、客户端异常退出业务流程 &#xff08;1&#xff09;在业务模块定义处理客户端异常退出的函数 &#xff08;2&#xff09;集群聊天服务器项目(八&#xff09;提到…

为什么在Python中总是使用【字典】这种类型呢?

你好&#xff0c;我是安然无虞。 文章目录 创建字典新增字典元素update 方法 删除字典元素pop 方法popitem 方法 查找字典元素in 和 in not 操作符get 方法thisdict[key] 修改字典元素遍历字典元素for循环遍历keys方法values方法items方法 合并字典字典中的key 字典常用接口汇…

网际协议 - IP

文章目录 目录 文章目录 前言 1 . 网际协议IP 1.1 网络层和数据链路层的关系 2. IP基础知识 2.1 什么是IP地址? 2.2 路由控制 3. IP地址基础知识 3.1 IP地址定义 3.2 IP地址组成 3.3 IP地址分类 3.4 子网掩码 IP地址分类导致浪费? 子网与子网掩码 3.5 CIDR与…

常见缓存数据库

Redis Redis 是完全开源的&#xff0c;遵守 BSD 协议&#xff0c;是一个高性能的 key-value 数据库。 Redis 与其他 key - value 缓存产品有以下三个特点&#xff1a; Redis支持数据的持久化&#xff0c;可以将内存中的数据保存在磁盘中&#xff0c;重启的时候可以再次加载进行…

自己动手用ESP32手搓一个智能机器人:ESP32-CAM AI Robot

目录 介绍 硬件需求 软件需求 步骤 总结 源码下载 介绍 ESP32-CAM是一款集成了Wi-Fi和蓝牙功能的微控制器模块&#xff0c;同时还集成了摄像头接口&#xff0c;使其成为一个非常适合构建智能机器人的选择。在本项目中&#xff0c;我将向您展示如何使用ESP32-CAM模块构建…

数据运营分析-详解

一、指标与指标体系 指标体系就是业务逻辑的框架,也是思考业务逻辑的第一步 案例: 老板,我负责的用户活跃,主要考察每天启动产品的注册用户数量,整体来看,每月活跃保持7.3%的增长,是因为渠道团队的拉新活动带来很多新增注册用户,占每月活跃用户的40%,新一年会继续沿…

消息队列的七种经典应用场景

在笔者心中&#xff0c;消息队列&#xff0c;缓存&#xff0c;分库分表是高并发解决方案三剑客。 在职业生涯中&#xff0c;笔者曾经使用过 ActiveMQ 、RabbitMQ 、Kafka 、RocketMQ 这些知名的消息队列 。 这篇文章&#xff0c;笔者结合自己的真实经历&#xff0c;和大家分享…