vue props和attrs

news/2024/7/24 3:43:05 标签: vue

vue3

props 要先声明才能取值,attrs不用声明直接使用($attrs 包含 class and style attribute)
props 不包含事件,attrs包含
props 支持 String 以外的类型,attrs只有 String 类型
props 没有声明的属性,会在 attrs 里,若在 props 内声明了该属性,那么 attrs 里就不会出现该属性

vue2与vue3的不同

包含所有父作用域的绑定 (class 和 style 除外)

props 不包含事件,attrs也不包含,事件通过$listeners监听

 

补充:

vue2官方

$attrs:

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

vue3

$listeners 被移除或整合到 $attrs
$attrs 现在包含 class and style attribute

 


http://www.niftyadmin.cn/n/951516.html

相关文章

vue3 setup使用(详细)

官网vue3-setup 总结: 1、setup 函数时,它将接受两个参数:(props、context(包含attrs、slots、emit)) 2、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数 3、执行 setup 时&#x…

vue3 computed和watch

学习笔记记录(内容来源于官网) computed vue3 计算属性和vue2变化不大,只需要注意,它返回的是一个响应式的ref对象,所以在使用的时候需要.value(模板中使用不需要,会自动展开) const count ref(1) const plusOne …

watch和watchEffect

学习笔记记录(内容来源于官网) watch vue3watch用法和vue变化也不是特别大,vue3支持侦听多个数据源 用法没太大变化:wach是一个钩子函数,支持传入三个参数(个人理解) 1、监听对象 2、回调函…

TS学习笔记(十):命名空间

在确保我们创建的变量不会泄露至全局变量中,我们以前曾采用过这种代码组织形式: (function(someObj){someObj.age 18;})(someObj || someObj {});复制代码但在基于文件模块的项目中,我们无须担心这一点,此种方式,适合…

TS学习笔记:命名空间

在确保我们创建的变量不会泄露至全局变量中,我们以前曾采用过这种代码组织形式: (function(someObj){someObj.age 18; })(someObj || someObj {});但在基于文件模块的项目中,我们无须担心这一点,此种方式,适合用于合…

vue 预览pdf

<embed:src"previewSrc"type"application/pdf"width"1200px"height"1000px"> embed 标签h5特性中包含四个属性&#xff1a;高、宽、类型、预览文件src&#xff01; 与< iframe > < / iframe > 不同&#xff0c;这个…

CSDN博客第一天,求关注!!!

CSDN博客第一天&#xff0c;求关注&#xff0c;欢迎各位前辈、大侠、大佬捧场。

OpenLayers 4 ol.source 详解

source 是 Layer 的重要组成部分&#xff0c;表示图层的来源&#xff0c;也就是服务地址。 除了在构造函数中指定外&#xff0c;还可以使用 layer.setSource(source) 稍后指定。 一、包含的类型 ol.source.BingMaps &#xff0c;必应地图的切片数据&#xff0c;继承自ol.sour…