Vue 中的透传,插槽,依赖注入

1. 透传attributes

在组件上使用透传attribute: 当你在父组件中使用子组件时,你可以添加一些attribute到子组件上,即使这些attribute没有在子组件的props中声明。

父组件:

<!-- 父组件,例如 ParentComponent.vue -->
<template><div><MyComponentdata-id="123"data-user="alice"class="my-custom-class"style="color: red;"/></div>
</template><script>
import MyComponent from '../components/MyComponent.vue';export default {components: {MyComponent}
};
</script><style>
/* 父组件样式 */
</style>

子组件:

<!-- MyComponent.vue -->
<template><div v-bind="$attrs"><h3>透传的Attributes:</h3><ul><li v-for="(value, name) in $attrs" :key="name">{{ name }}: {{ value }}</li></ul></div></template><script>export default {inheritAttrs: false, // 禁用默认的attribute继承行为};</script><style>/* 组件样式 */</style>

显示效果:

当然如果你想在控制台打印出来,你可以打印 this.&attrs

  <script>export default {inheritAttrs: false, // 禁用默认的attribute继承行为,mounted() {// 在组件挂载后,打印透传的attributesconsole.log('透传的Attributes:', this.$attrs);},};</script>

2. 插槽

就是直接在组件中插入对应的模版

2.1 简单点的插入:

ChildComponent.vue:

<template><div>before<slot></slot><slot></slot><slot></slot>after</div>
</template><script setup></script><style>
</style>

父组件: 

<template><div class="home"><ChildComponent><div>{{hello}}</div></ChildComponent></div>
</template><script setup>
import { ref } from 'vue'
import ChildComponent from '../components/ChildComponent.vue'const hello = ref('Hello world! 2024')
</script>

显示效果:就是将插入的div代替了子组件的slot位置

2.2 在插槽指定的位置,插入指定的值

ChildComponent.vue:

<template><div><slot name="header"></slot><slot name="content"></slot><slot name="footer"></slot></div></template>

 父组件:

<template><div class="home"><ChildComponent><template #header><p>This is the header slot</p></template><template #content><p>This is the content slot with a variable: {{ contentVariable }}</p></template><template #footer><p>This is the footer slot</p></template></ChildComponent></div>
</template><script>
import { ref } from 'vue'
import ChildComponent from '../components/ChildComponent.vue'export default {components: {ChildComponent},setup() {const contentVariable = ref('This is some content.')return { contentVariable }}
}
</script>

3. 依赖注入

为了便于祖孙之间数据的传输,

3.1 祖组件向子组件和孙组件传递数据示例

祖组件:

<template><div><h1>Ancestor Component</h1><p>Providing a message: "{{ message }}"</p><ChildComponent /></div>
</template><script>
import { provide, ref } from 'vue';
import ChildComponent from '../components/ChildComponent.vue';export default {components: {ChildComponent},setup() {const message = ref('Hello from Ancestor!');provide('ancestorMessage', message);return { message };}
}
</script>

子组件:

<template><div><h2>Child Component</h2><p>Message from Ancestor: "{{ ancestorMessage }}"</p><GrandchildComponent /></div></template><script>import { inject } from 'vue';import GrandchildComponent from '../components/GrandchildComponent.vue';export default {components: {GrandchildComponent},setup() {const ancestorMessage = inject('ancestorMessage');return { ancestorMessage };}}</script>

孙组件:

<template><div><h3>Grandchild Component</h3><p>Message from Ancestor: "{{ ancestorMessage }}"</p></div></template><script>import { inject } from 'vue';export default {setup() {const ancestorMessage = inject('ancestorMessage');return { ancestorMessage };}}</script>

然后你会发现子和孙组件都是通过inject来接收数据,而祖组件只需要通过provide发送数据

显示效果:

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

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

相关文章

Figma汉化:提升设计效率,降低沟通成本

在UI设计领域&#xff0c;Figma因其强大的功能而广受欢迎&#xff0c;但全英文界面对于国内设计师来说是一个不小的挑战。幸运的是&#xff0c;通过Figma汉化插件&#xff0c;我们可以克服语言障碍。以下是两种获取和安装Figma汉化插件的方法&#xff0c;旨在帮助国内的UI设计师…

SpringBoot项目实现登录——集成JWT令牌和验证码的登录业务

目录 前言 一、初步认识JWT令牌 二、利用JWT令牌实现登录功能 1.配置登录拦截器&#xff1a; 2.实现后端的登录接口 三、在登录中添加验证码功能 点此查看&#xff1a;完整的&#xff0c;附带验证码和JWT令牌验证功能的登录流程&#xff0c;完整代码 前言 在我们的项目…

网络常用特殊地址-127.0.0.1

借用Medium博客的一张图 经常在问题解答群里留意到如下关于127.0.0.1的消息 ”如果单机版&#xff0c;不需要配置IP&#xff0c;所有配置IP的地方都写死127.0.0.1就可以” “ip: 根据实际情况填写&#xff08;在 xxx-init.conf 里可以给一个默认值 127.0.0.1 &#xff0c;方便…

【模拟仿真】基于区间观测器的故障诊断与容错控制

摘要 本文提出了一种基于区间观测器的故障诊断与容错控制方法。该方法通过构建区间观测器&#xff0c;实现对系统状态的上下边界估计&#xff0c;从而在存在不确定性和外部噪声的情况下进行高效的故障诊断。进一步地&#xff0c;本文设计了一种容错控制策略&#xff0c;以保证…

全面解锁:重启服务的高效方法汇总

在运维和系统管理中&#xff0c;重启服务是一个常见的操作。本文将介绍几种重启服务的方法&#xff0c;包括通过系统命令、脚本或程序、外部监控进程以及服务自身的机制来实现。 一、通过系统命令重启服务 使用systemctl命令 适用于使用systemd作为系统初始化程序的Linux系统…

fio检测硬盘的读写是都正常

有时候发现访问磁盘上文件很慢,但是不知道到底是不是硬盘的问题,此时可以使用该工具进行检测以方便排查问题 一、下载 https://github.com/axboe/fio/releases 注:(1)官网地址无法下载(https://bsdio.com/fio/、https://brick.kernel.dk/snaps/) 二、安装 1、Windo…

golang使用etcd版本问题

报错&#xff1a;如下与新版本的grpc包冲突&#xff0c;当前引入的etcd版本为旧版本。 go: common/modules/etcd importsgo.etcd.io/etcd/clientv3 tested bygo.etcd.io/etcd/clientv3.test importsgithub.com/coreos/etcd/auth importsgithub.com/coreos/etcd/mvcc/backend i…

使用python操作kafka

第一步&#xff1a;安装kafka的模块 pip install kafka-python 第二步&#xff1a;编写代码 from kafka import KafkaProducer from kafka.errors import KafkaError import json import random import timeclass StationLog:def __init__(self, station_id, call_out, call…

CC4学习记录

&#x1f338; CC4 CC4要求的commons-collections的版本是4.0的大版本。 其实后半条链是和cc3一样的&#xff0c;但是前面由于commons-collections进行了大的升级&#xff0c;所以出现了新的前半段链子。 配置文件&#xff1a; <dependency><groupId>org.apach…

自动化报表怎么写

自动化报表设计 标题 日期 筛选器 具体字段自由字段 迷你图 同环比 条件格式 步骤 填充数值 1、先筛选战区日期sumifs(纯数值-注册人数&#xff0c;纯数值-战区列&#xff0c;周报-战区单元格&#xff0c;纯数值-日期&#xff0c;周报-日期单元格) 需要注意⚠️纯数值里的单元格…

mysql中mvcc如何处理纯读事务的?

在 MySQL 的 InnoDB 中&#xff0c;即使事务尚未分配事务 ID&#xff0c;读视图&#xff08;Read View&#xff09; 的生成仍然依赖于系统中的活跃事务列表。这是通过 MVCC 的机制来实现的&#xff0c;以下是具体的原理和可见性判断方法。 MVCC 的核心概念 在 MVCC 中&#xf…

魔改log4j2的JsonLayout,支持自定义json格式日志

小伙伴们&#xff0c;你们好&#xff0c;我是老寇&#xff0c;我又回来辣&#xff0c;1个多月不见甚是想念啊&#xff01;&#xff01;&#xff01;跟我一起魔改源码吧 1.自定义json格式【PatternLayout】 大部分教程都是这个&#xff0c;因此&#xff0c;我就简单给个配置&a…

笔记分享: 西安交通大学COMP551705数据仓库与数据挖掘——02. 关联规则挖掘

文章目录 1. \textbf{1. } 1. 基本概念 2. \textbf{2. } 2. 布尔关联规则 2.1. \textbf{2.1. } 2.1. 一些基本概念 2.2. \textbf{2.2.} 2.2. Apriori \textbf{Apriori} Apriori算法 2.3. \textbf{2.3.} 2.3. Apriori \textbf{Apriori} Apriori算法示例 3. \textbf{3. } 3. 多…

基于标签相关性的多标签学习

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

网站小程序app怎么查有没有备案?

网站小程序app怎么查有没有备案&#xff1f;只需要官方一个网址就可以&#xff0c;工信部备案查询官网地址有且只有一个&#xff0c;百度搜索 "ICP备案查询" 找到官方gov.cn网站即可查询&#xff01; 注&#xff1a;网站小程序app备案查询&#xff0c;可通过输入单位…

手撸 chatgpt 大模型:简述 LLM 的架构,算法和训练流程

本节我们自顶向下看看大模型的相关概念&#xff0c;了解其基本架构以及从零手撸大模型的基本流程。自从 openai 释放了 chatgpt 后&#xff0c;人工智能就立马进入了大模型时代&#xff0c;我还记得在此之前 NLP 的处理主要依赖于深度学习的 LSTM&#xff0c;GRU 等模型架构。这…

爬虫——JSON数据处理

第三节&#xff1a;JSON数据处理 在爬虫开发中&#xff0c;JSON&#xff08;JavaScript Object Notation&#xff09;是最常见的数据格式之一&#xff0c;特别是在从API或动态网页中抓取数据时。JSON格式因其结构简单、可读性强、易于与其他系统交互而广泛应用于前端与后端的数…

AutoUpdater.NET 实现 dotNET应用自动更新

AutoUpdater.NET 是一款用于WPF、Winform软件版本更新的框架&#xff0c;类似框架还有Squirrel、WinSparkle、NetSparkle、Google Omaha。 一、安装AutoUpdater.NET 首先&#xff0c;您需要在项目中安装AutoUpdater.NET库。您可以通过NuGet包管理器来安装它。在Visual Studio中…

鸿蒙实现 web 传值

前言&#xff1a;安卓和 IOS 加载 H5 的时候&#xff0c;都有传值给到 H5 或者接收 H5 值&#xff0c;鸿蒙也可传值和接收 H5 的内容&#xff0c;以下是鸿蒙传值给 H5 端的具体操作 一: 定义好 H5 和鸿蒙传值的方法名&#xff0c;两端必须保持方法名一致 // xxx.ets import …

SpringBoot集成itext导出PDF

添加依赖 <!-- PDF导出 --><dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId><version>5.5.11</version></dependency><dependency><groupId>com.itextpdf</groupId>&l…