Vue中$props、$attrs和$listeners的使用详解

文章目录

  • 透传属性
    • 如何禁止“透传属性和事件”
    • 多根节点设置透传
    • 访问“透传属性和事件”
  • `$props`、`$attrs`和`$listeners`的使用详解

透传属性

  • 透传属性和事件并没有在子组件中用propsemits声明
  • 透传属性和事件最常见的如@clickclassidstyle
  • 当子组件只有一个根元素时,透传属性和事件会自动添加到该根元素上;如果根元素已有classstyle属性,它会自动合并

如何禁止“透传属性和事件”

  • 在选项式 API 中,你可以在组件选项中设置inheritAttrs: false来阻止;
  • 在组合式 API 的<script setup>中,你需要一个额外的<script>块来书写inheritAttrs: false选项声明来禁止
<script>
export default {inheritAttrs: false // 阻止自动透传给唯一的根组件
}
</script>

多根节点设置透传

多根节点的组件并没有自动“透传属性和事件”的行为,由于Vue不确定要将“透传属性和事件”透传到哪里,所以我们需要v-bind="$attrs"来显式绑定,否则将会抛出一个运行时警告。

<button class="chip" v-bind="$attrs">普通纸片</button>

访问“透传属性和事件”

在选项式 API 中,我们可通过this.$attrs来访问“透传属性和事件”

在组合式 API 中的<script setup>中引入useAttrs()来访问一个组件的“透传属性和事件”

<script setup>
import { useAttrs } from 'vue';// 透传的属性和事件对象
let attrs = useAttrs()// 在 JS 中访问透传的属性和事件
function showAttrs() {console.log(attrs)console.log(attrs.class)console.log(attrs.title)console.log(attrs.style)attrs.onClick()
}
</script><template><button class="chip" v-bind="attrs"></button><h6>{{ attrs }}</h6><ul><li>{{ attrs.title }}</li><li>{{ attrs.class }}</li><li>{{ attrs.style }}</li></ul><button @click="attrs.onClick()">执行透传的事件</button><button @click="showAttrs">JS 中访问透传的属性和事件</button>
</template><style>
.chip {border: none;background-color: rgb(231, 231, 231);padding: 8px 15px;margin: 10px;
}.rounded {border-radius: 100px;
}
</style>

$props$attrs$listeners的使用详解

  • $props:当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。
  • $attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。
  • $listeners:包含了父作用域中(不含 .native 修饰器的)v-on事件监听器。他可以通过 v-on="listeners"传入内部组件

1、父组件

<template><div><div>父亲组件</div><Child:foo="foo":zoo="zoo"@handle="handleFun"></Child></div>
</template><script>
import Child from './Child.vue'
export default {components: { Child },data() {return {foo: 'foo',zoo: 'zoo'}},methods: {// 传递事件handleFun(value) {this.zoo = valueconsole.log('孙子组件发生了点击事件,我收到了')}}
}
</script>

2.儿子组件(Child.vue)

在儿子组件中给孙子组件添加v-bind="$attrs",这样孙子组件才能接收到数据。
$attrs是从父组件传过来的,且儿子组件未通过props接收的数据,例如zoo

<template><div class='child-view'><p>儿子组件--{{$props.foo}}{{foo}}内容一样</p><GrandChild v-bind="$attrs" v-on="$listeners"></GrandChild></div>
</template><script>
import GrandChild from './GrandChild.vue'
export default {// 继承所有父组件的内容inheritAttrs: true,components: { GrandChild },props: ['foo'],data() {return {}}
}
</script>

3.孙子组件(GrandChild.vue)

在孙子组件中一定要使用props接收从父组件传递过来的数据

<template><div class='grand-child-view'><p>孙子组件</p><p>传给孙子组件的数据:{{zoo}}</p><button @click="testFun">点我触发事件</button></div>
</template><script>
export default {// 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性inheritAttrs: false,// 在本组件中需要接收从父组件传递过来的数据,注意props里的参数名称不能改变,必须和父组件传递过来的是一样的props: ['zoo'],methods: {testFun() {this.$emit('handle', '123')}}
}
</script>

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

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

相关文章

jOOQ指南中使用的数据库

jOOQ指南中使用的数据库 本指南中使用的数据库将在本节中进行总结和创建 使用Oracle方言来创建 # 创建语言 CREATE TABLE language (id NUMBER(7) NOT NULL PRIMARY KEY,cd CHAR(2) NOT NULL,description VARCHAR2(50) );# 创建作者 CREATE TABLE author (id NUMBER(7) NOT …

mysql:需要准确存储的带小数的数据,要使用DECIMAL类型

需要准确存储的带小数的数据&#xff0c;要使用DECIMAL&#xff0c;特别是涉及金钱类的业务。而不要使用FLOAT或者DOUBLE。 因为DECIMAL是准确值&#xff0c;不会损失精度。 而FLOAT或者DOUBLE是近似值&#xff0c;会损失精度。 https://dev.mysql.com/doc/refman/8.2/en/fixe…

差生文具多系列之最好看的编程字体

&#x1f4e2; 声明&#xff1a; &#x1f344; 大家好&#xff0c;我是风筝 &#x1f30d; 作者主页&#xff1a;【古时的风筝CSDN主页】。 ⚠️ 本文目的为个人学习记录及知识分享。如果有什么不正确、不严谨的地方请及时指正&#xff0c;不胜感激。 直达博主&#xff1a;「…

数据结构 | Floyd

参考博文&#xff1a; floyd算法 弗洛伊德算法 多源最短路径算法_弗洛伊德算法例题-CSDN博客

【文心一言】AI试用写代码体会:delphi、php

一、前言&#xff1a; 二、让【文心一言】编写一个函数 1. Delphi 语言&#xff08;文心一言的回复&#xff09; 2. php 语言&#xff08;文心一言回复&#xff09; 三、总结 一、前言&#xff1a; 众所周知&#xff0c;chatGPT是可以自动编写程序的&#xff0c;甚至可以运…

MyBatis缓存机制流程分析

前言 在进行分析之前&#xff0c;建议快速浏览之前写的理解MyBatis原理、思想&#xff0c;这样更容易阅读、理解本篇内容。 验证一级缓存 MyBatis的缓存有两级&#xff0c;一级缓存默认开启&#xff0c;二级缓存需要手动开启。 重复读取跑缓存 可以看到&#xff0c;第二次…

OpenAI承认GPT-4变懒,即将发布修复方案提升性能

目录 1OpenAI承认GPT-4变懒&#xff0c;即将发布修复方案提升性能 2一文秒懂人工智能全球近况 1OpenAI承认GPT-4变懒&#xff0c;即将发布修复方案提升性能 **划重点:** 1. &#x1f92f; 用户反馈:GPT-4使用者抱怨OpenAI破坏了体验&#xff0c;称模型几乎“害怕”提供答案。…

Wireshark使用技巧

Wireshark作为网络数据软件&#xff0c;功能强大&#xff0c;本专栏介绍仅为冰山一角&#xff0c;仅仅是一个入门级别的介绍&#xff0c;大部分功能还需要在日常工作中进行挖掘。 总结Wireshark软件的使用技巧如下&#xff1a; 1.合理部署Wireshark的位置&#xff0c;从源头保障…

基于Java SSM框架实现电影售票系统项目【项目源码+论文说明】

基于java的SSM框架实现电影售票系统演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#…

界面控件DevExpress WPF导航组件,助力升级应用程序用户体验!(下)

DevExpress WPF的Side Navigation&#xff08;侧边导航&#xff09;、TreeView、导航面板组件能帮助开发者在WPF项目中添加Windows样式的资源管理器栏或Outlook NavBar&#xff08;导航栏&#xff09;&#xff0c;DevExpress WPF NavBar和Accordion控件包含了许多开发人员友好的…

rsyslog配置以及原理

rsyslog 日志由程序产生&#xff0c;在内存中产生。通过Rsyslog来将内存中程序产生的日志持久化到硬盘&#xff0c;并且支持udp、tcp等协议来进行不同服务器的日志同步。 /var/log/messages:大多数系统日志信息纪录在此/var/log/secure&#xff1a;安全和身份认证相关的消息和…

HTTP详解

1. web 1.1 web相关概念 软件架构 C /S&#xff1a;客户端/服务器端 需要安装客户端应用 B/S&#xff1a;浏览器/服务器端 不需要安装客户端应用&#xff0c;对于用户来说只需要记住域名访问就可以,高效,客户端零维护 资源分类 静态资源&#xff1a;所有用户访问后&#x…

数据库系统原理与实践 笔记 #12

文章目录 数据库系统原理与实践 笔记 #12事务管理和并发控制与恢复(续)并发控制SQL-92中的并发级别基于锁的协议基于锁的协议的隐患锁的授予封锁协议两阶段封锁协议多粒度粒度层次的例子意向锁类型相容性矩阵多粒度封锁模式基于时间戳的协议基于时间戳协议的正确性基于有效性检…

怎样在PPT中加入音频文件?记好这4个简单操作!

“我要制作一个比较专业的PPT来汇报工作成果&#xff0c;想在PPT里加一段音乐&#xff0c;但是不知道应该如何操作&#xff0c;有没有朋友可以指导一下呢&#xff1f;” PPT作为一种常用的文件形式&#xff0c;很多用户会将其用于工作汇报&#xff0c;期末总结以及各种演讲。在…

HTML---基础

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 一.HTML概述 HTML&#xff08;超文本标记语言&#xff09;是一种用于创建网络页面的标记语言。它以标记的形式编写&#xff0c;该标记描述了文档的结构和内容。HTML文件由一系列标记&#…

六级高频词组2

目录 词组 参考链接 词组 51. arise from&#xff08;be caused by&#xff09; 由…引起。 52. arrange for sb.sth. to do sth. 安排…做… 53. arrive on 到达&#xff1b; arrive at 到达某地&#xff08;小地方&#xff09;&#xff1b;得出&#xff0c;作出&#x…

zookeeper基础内容

文章目录 Zookeeper基础概述数据结构Zookeeper节点操作zookeeper节点操作命令数据模型 znode 结构 zookeeper java客户端ZooKeeper原生APICuratorzkClient对比总结 Zookeeper基础 概述 zookeeper&#xff08;分布式协调服务&#xff09; 本质&#xff1a;小型的文件存储系统监…

寄存器、缓存、内存、硬盘、存储器的理解

https://blog.csdn.net/heixiaolong7/article/details/51226378 只要能存储数据的器件都可以称之为存储器&#xff0c;它的含义覆盖了寄存器&#xff0c;缓存&#xff0c;内存&#xff0c;硬盘。cpu访问快慢的速度依次为 寄存器-> 缓存->内存->硬盘 寄存器是中央处…

Springboot内置Tomcat线程数优化

Springboot内置Tomcat线程数优化 # 等待队列长度&#xff0c;默认100。队列也做缓冲池用&#xff0c;但也不能无限长&#xff0c;不但消耗内存&#xff0c;而且出队入队也消耗CPU server.tomcat.accept-count1000 # 最大工作线程数&#xff0c;默认200。&#xff08;4核8g内存…