vue3透传Attributes

vue3透传Attributes,组件名称上写的事件、style、类名也会生效;

  • 如果是透传事件,点击子组件内部按钮,会执行组件内部,再执行组件名上的

父组件

<script setup>
import ChildView from './ChildView.vue'function onClick(){alert('父组件透传')
}
</script><template><ChildView@click="onClick"></ChildView>
</template>

子组件

<script setup>
function childClick(){alert('子组件自己点击')
}
</script><template><button @click="childClick">透传测试</button>
</template>

先执行childClick,再执行onClick

  • 多层嵌套也会实现透传
    父组件
<script setup>
import ChildView from './ChildView.vue'function onClick(){alert('父组件透传')
}
</script><template><ChildView@click="onClick"></ChildView>
</template>

子组件

<script setup>import GrandsonView from './GrandsonView.vue';
function childClick(){alert('子组件透传')
}
</script><template>
<GrandsonView></GrandsonView>
</template>

孙组件

<script setup>
function grandsonClick() {alert('孙子组件点击')
}
</script><template>
<button @click="grandsonClick">透传测试</button>
</template>

点击孙子内部的按钮后,父组件里组件名称上的点击事件onClick也生效了。

  • 透传的一些规则
    父组件
<script setup>
import ChildView from './ChildView.vue'function fatherClick(){alert('父组件透传')
}
function fatherFunction(){alert('父组件方法1')
}
</script><template><ChildViewprop1=1prop2=2@click="fatherClick"@hover="fatherFunction"></ChildView>
</template>

子组件

<script setup>import GrandsonView from './GrandsonView.vue';
defineProps(['prop1'])
const emit = defineEmits(['fatherClick'])
function childClick() {emit('fatherClick')
}
</script><template>
<GrandsonView @click="childClick"></GrandsonView>
</template>

孙组件

<script setup></script><template><!-- 获取所有的透传值 -->
<div>{{$attrs}}</div>
<!-- 调用父组件透传下来的点击事件 -->
<div>{{$attrs.onClick}}</div>
<!-- 调用父组件透传下来的悬浮事件 -->
<div>{{$attrs.onHover}}</div>
<!-- 调用父组件的prop -->
<div>{{$attrs.prop2}}</div>
</template>

1. 如果prop被中间组件用了,使用过的不会再向里传
父组件有prop1,prop2,但子组件defineProps([‘prop1’])把prop1使用了,所以孙子组件只剩prop2;
2. 如果事件被中间组件使用了,使用过的也不会再向里传
父组件透传了fatherClick、fatherFunction,但子组件emit(‘fatherClick’)使用了fatherClick,所以孙子组件只剩fatherFunction
在这里插入图片描述
attrs 对象总是反映为最新的透传 attribute,但它并不是响应式。不能通过侦听器去监变化。需要响应性,可以使用 prop。或者你可使用 onUpdated() ,在每次更新时使用最新的 attrs

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

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

相关文章

18. C++STL 4(vector的使用, 空间增长, 迭代器失效详解)

⭐本篇重点&#xff1a;vector容器的使用详解 ⭐本篇代码&#xff1a;c学习/08.vector_test 橘子真甜/c-learning-of-yzc - 码云 - 开源中国 (gitee.com) 目录 一. vector的介绍 二. vector的使用 2.1 vector的定义 * 2.2 vector的迭代器和遍历 a operator[]访问 b vect…

深入探索机器学习性能优化的关键路径——《特征工程训练营》

通过“特征工程”技术&#xff0c;可优化训练数据&#xff0c;提升机器学习流程的输出效果&#xff01;“特征工程”基于现有数据设计相关的输入变量&#xff0c;由此简化训练过程&#xff0c;增强模型性能。调整超参数或模型的效果都不如特征工程&#xff1b;特征工程通过改变…

吉他初学者学习网站搭建系列(8)——如何练习音阶

文章目录 背景实现吉他面板音阶位置音阶识别 结语 背景 大家好&#xff0c;我是一个爱好音乐的非典型程序员&#xff01;我最近又往自己的网站中集成了一个模块——音阶。下面介绍一下背景。 很多吉他初学者在掌握了一些音阶知识后&#xff0c;可能不知道怎么训练自己的对音阶…

15.三数之和 python

三数之和 题目题目描述示例 1&#xff1a;示例 2&#xff1a;示例 3&#xff1a;题目链接 题解Python 实现解释提交结果 题目 题目描述 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满…

tauri使用github action打包编译多个平台arm架构和inter架构包踩坑记录

这些error的坑&#xff0c;肯定是很多人不想看到的&#xff0c;我的开源软件PakePlus是使用tauri开发的&#xff0c;PakePlus是一个界面化将任何网站打包为轻量级跨平台软件的程序&#xff0c;利用Tauri轻松构建轻量级多端桌面应用和多端手机应用&#xff0c;为了实现发布的时候…

Android 12.0 DocumentsUI文件管理器首次进入默认显示内部存储文件功能实现

1.前言 在12.0的系统rom定制化开发中,在关于文件管理器的某些功能中,在首次进入文件管理器的时候默认进入下载 文件夹,点击菜单选择内部存储的时候,会显示内部存储的内容,客户开发需要要求默认显示内部存储的文件 接下来分析下功能的实现 如图: 2.DocumentsUI文件管理器首…

抓包之wireshark基础用法介绍

写在前面 wireshark作为最优秀的抓包工具&#xff0c;有必要详细的看下其基本用法&#xff0c;所以本文就一起来做这件事吧&#xff01; 1&#xff1a;初步介绍 打开wireshark首先会进入如下的界面&#xff1a; 想要开始抓包&#xff0c;需要进行如下操作&#xff1a; 接着…

【Java基础入门篇】二、控制语句和递归算法

Java基础入门篇 二、控制语句和递归算法 2.1 switch-case多分支选择语句 switch执行case语句块时&#xff0c;若没有遇到break&#xff0c;则运行下一个case直到遇到break&#xff0c;最后的default表示当没有case与之匹配时&#xff0c;默认执行的内容&#xff0c;代码示例如…

【人工智能学习之STGCN训练自己的数据集】

STGCN训练自己的数据集 准备事项数据集制作视频转jsonjsons转jsonjson转npy&pkl 训练STGCN添加图结构修改训练参数开始训练测试 准备事项 st-gcn代码下载与环境配置 git clone https://github.com/yysijie/st-gcn.git cd st-gcn pip install -r requirements.txt cd torc…

Dify+Docker

1. 获取代码 直接下载 &#xff08;1&#xff09;访问 langgenius/dify: Dify is an open-source LLM app development platform. Difys intuitive interface combines AI workflow, RAG pipeline, agent capabilities, model management, observability features and more, …

Android so库的编译

在没弄明白so库编译的关系前,直接看网上博主的博文,常常会觉得云里雾里的,为什么一会儿通过Android工程cmake编译,一会儿又通过NDK命令去编译。两者编译的so库有什么区别? android版第三方库编译总体思路: 对于新手小白来说搞明白上面的总体思路图很有必…

Java函数式编程+Lambda表达式

文章目录 函数式编程介绍纯函数Lambda表达式基础Lambda的引入传统方法1. 顶层类2. 内部类3. 匿名类 Lambda 函数式接口&#xff08;Functional Interface&#xff09;1. **函数式接口的定义**示例&#xff1a; 2. **函数式接口与Lambda表达式的关系**关联逻辑&#xff1a;示例&…

Linux操作系统2-进程控制3(进程替换,exec相关函数和系统调用)

上篇文章&#xff1a;Linux操作系统2-进程控制2(进程等待&#xff0c;waitpid系统调用&#xff0c;阻塞与非阻塞等待)-CSDN博客 本篇代码Gitee仓库&#xff1a;Linux操作系统-进程的程序替换学习 d0f7bb4 橘子真甜/linux学习 - Gitee.com 本篇重点&#xff1a;进程替换 目录 …

文件上传漏洞:你的网站安全吗?

文章目录 文件上传漏洞攻击方式&#xff1a;0x01绕过前端限制0x02黑名单绕过1.特殊解析后缀绕过2..htaccess解析绕过3.大小写绕过4.点绕过5.空格绕过6.::$DATA绕过7.配合中间件解析漏洞8.双后缀名绕过9.短标签绕过 0x03白名单绕过1.MIME绕过(Content-Type绕过)2.%00截断3.0x00截…

设计模式-适配器模式-注册器模式

设计模式-适配器模式-注册器模式 适配器模式 如果开发一个搜索中台&#xff0c;需要适配或接入不同的数据源&#xff0c;可能提供的方法参数和平台调用的方法参数不一致&#xff0c;可以使用适配器模式 适配器模式通过封装对象将复杂的转换过程隐藏于幕后。 被封装的对象甚至…

springboot341+vue校园求职招聘系统设计和实现pf(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 校园求职招聘系统设计与实现 摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;…

基于java web的网上书店系统设计

摘 要 随着互联网的越发普及&#xff0c;网上购物成为了当下流行的热门行为。网络上开店创业有许多的优势&#xff1a;投入少&#xff0c;启动 资金低&#xff0c;交易便捷。网上书店与传统的线下书店比起来优势巨大&#xff0c;网上书店的经营方式和销售渠道是不同与线下书 店…

Java设计模式——职责链模式:解锁高效灵活的请求处理之道

嘿&#xff0c;各位 Java 编程大神和爱好者们&#xff01;今天咱们要一同深入探索一种超厉害的设计模式——职责链模式。它就像一条神奇的“处理链”&#xff0c;能让请求在多个对象之间有条不紊地传递&#xff0c;直到找到最合适的“处理者”。准备好跟我一起揭开它神秘的面纱…

Android 设备使用 Wireshark 工具进行网络抓包

背景 电脑和手机连接同一网络&#xff0c;想使用wireshark抓包工具抓取Android手机网络日志&#xff0c;有以下两种连接方法&#xff1a; Wi-Fi 网络抓包。USB 网络共享抓包。需要USB 数据线将手机连接到电脑&#xff0c;并在开发者模式中启用 USB 网络共享。 查看设备连接信…

redis大key和热key

redis中大key、热key 什么是大key大key可能产生的原因大key可能会造成什么影响如何检测大key如何优化删除大key时可能的问题删除大key的策略 热key热key可能导致的问题解决热key的方法 什么是大key 大key通常是指占用内存空间过大或包含大量元素的键值对。 数据量大&#xff…