Vue 中 props 和 attrs 概念与区别

2023-11-16

Vue 中的区别:
Vue中的 a t t r s 和 attrs和 attrslistener
Vue-- a t t r s 与 attrs与 attrslisteners的详解

在 vue 中,对于在父组件中传递的属性,

若在子组件中使用@Prop声明了属性如@Prop name,则 name 属性只会在 this. p r o p s 中 出 现 , 不 会 出 现 在 t h i s . props 中出现,不会出现在 this. propsthis.attrs 中;

若在子组件中没有使用@Prop声明属性,则属性会默认在 this. a t t r s 中 , 不 会 出 现 在 t h i s . attrs 中,不会出现在 this. attrsthis.props 中;

故一般用 this.$attrs 接收处理没有用 @Prop 声明的属性,但一般不推荐这样,尽量使用 @Prop 声明所有自定义的属性,便于管理。

在 html 中的区别:
HTML中的attribute属性和JavaScript中的property属性的详解以及区别

props 是父类向子类传递并且需要子类主动接收的属性;

attrs 默认是父类传递到子类根元素的属性,子类不用主动接收,会直接放在子类根元素上。

而 attrs 的这种默认行为,可以通过设置 inheritAttrs 到 false,这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 a t t r s 可 以 让 这 些 特 性 生 效 , 且 可 以 通 过 v − b i n d ( v − b i n d = " attrs 可以让这些特性生效,且可以通过 v-bind (v-bind=" attrsvbindvbind="attrs")显性的绑定到非根元素上。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue 中 props 和 attrs 概念与区别 的相关文章

随机推荐

  • 微信小程序中使用svga动画

    参考资料 https github com svga SVGAPlayer Web tree mphttps github com svga SVGAPlayer Web tree mp 也可以参考 我主要参考的上面的 https gith
  • runtime交换方法的正确姿势

    runtime交换方法的正确姿势 说到Objective C大家就会想到黑魔法runtime 不知道runtime是什么的看这里 runtime是开源的 源码在这里 本文主要讲解如何利用runtime正确的交换方法 将会提到两种方式去交换
  • mysql中查询缓存优化以及慢查询

    1 概述 开启Mysql的查询缓存 当执行完全相同的SQL语句的时候 服务器就会直接从缓存中读取结果 当数据被修改 之前的缓存会失效 修改比较频繁的表不适合做查询缓存 2 操作流程 1 客户端发送一条查询给服务器 2 服务器先会检查查询缓存
  • 计算机科学与技术认知实验报告,15级计算机科学与技术三班林家铖实验报告-实验三.doc...

    15级计算机科学与技术三班林家铖实验报告 实验三 doc 1北京理工大学珠海学院实验报告ZHUHAICAMPAUSOFBEIJINGINSTITUTEOFTECHNOLOGY班级15级计算机3班学号150201101898姓名林家铖指导教师
  • APIpost简介

    文章目录 总述 下载地址 针对后端开发人员 针对前端开发人员 针对测试人员 针对研发经理 总述 ApiPost是一款支持模拟POST GET PUT等常见HTTP请求 支持团队协作 并可直接生成并导出接口文档的API 文档 调试 Mock
  • (原)tensorflow中提示CUDA_ERROR_LAUNCH_FAILED

    转载请注明出处 http www cnblogs com darkknightzh p 6606092 html 参考网址 https github com tensorflow tensorflow issues 6509 issueco
  • 亲密数对C++

    亲密数对 题目描述 给定两个不同的正整数a和b 如果a的因子 除了1和它本身 和等于b b的因子 除了1和它本身 和等于a 且a b 则a和b为一对亲密数 给定正整数N 求2 N中的亲密数对 输入 一个正整数N 2 N 20000 输出 输
  • glTexImage2D()

    函数定义 void glTexImage2D GLenum target GLint level GLint internalFormat GLsizei width GLsizei height GLint border GLenum f
  • MD5加密解密

    import java security MessageDigest import org apache commons codec digest DigestUtils import java math BigInteger Descri
  • 生成dll文件并供给unity使用

    先来一个脚本 本文就是将这个类打包成dll然后给unity使用 using System using System Collections Generic using System Linq using System Text 引入unit
  • 回归问题总结(梯度下降、线性回归、逻辑回归、源码、正则化)

    原文地址 http blog csdn net gumpeng article details 51191376 最近 应妹子要求 对回归问题进行了总结 网上相关资料很多 主要是针对Andrew Ng的在线课程写的笔记 但大部分都讲得不清晰
  • 在托管代码中重新发现丢失的内存优化艺术

    http www microsoft com china MSDN library netFramework netframework MemoryOptim mspx
  • Android Message Application -- SMS(一)

    SMS send ComposeMessageActivity 信息编辑 View 1 confirmSendMessageIfNeeded gt 是否收信人编辑 View 是否存在并已经显示 2 sendMessage gt 判断是否为紧
  • 为什么国内服务器带宽这么贵?

    带宽是对云服务器价格的影响也很大 它对访问速度和运行速度有很大的影响 尤其是同时在线访客数量的大小 也是有带宽决定 贵是有几个原因 1 首先 宽带是运营商管的 就是那三家垄断 价格没有可以谈的 2 做网站 应用等 你要考虑中国不同的人用不同
  • 《花雕学AI》ChatGPT Shortcut Chrome 扩展:让生产力和创造力加倍的 ChatGPT 快捷指令库

    你是否想要与一个智能的对话伙伴聊天 或者让它帮你完成各种任务 如写作 编程 摘要 翻译等 如果是的话 你可能会对 ChatGPT 感兴趣 ChatGPT 是一个基于 GPT 3 5 的对话式人工智能 可以与用户进行自然 流畅 有趣的对话 也
  • springboot使用默认的logback配置logback-spring.xml每天一个日志文件

    文章目录 logback application yml配置 logback spring xml内容 部署启动 2 application yml放在resources下 使用 logback springboot配置每天一个日志文件lo
  • 深度学习神经网络代码模板

    model文件 import torch from torch import nn class MyModel nn Module def init self super MyModel self init 在这里定义你的模型结构 self
  • 什么是 Git 和 Git Repository?(Python 在线运行实例)

    相信许多人都对 GitHub 一点都不陌生 即便不是程序员 我们也经常可以在 GitHub 上下载到非常优秀的开源软件 如果注意一下的话 我们会发现 GitHub 的名字是有 Git Hub 组成的 而有一些编程基础的同学可能也会听说过 G
  • java个人记账(非企业级应用)

    虽然很早就有写博客的打算 但时至今日才真正意义上开始 影响我写博客主要是有三件事吧 第一件就是以后面试时候可能不仅仅看你简历写什么而是看你博客和github上有什么 第二件是上家架构和我们说一项技术不是你学会如何使用而是教会别人怎么去使用
  • Vue 中 props 和 attrs 概念与区别

    Vue 中的区别 Vue中的 a t t r s 和 attrs和 attrs和listener Vue