vue3中的 $attrs 与 Attributes 继承
更新时间：2024年02月26日 10:08:23 作者：cocoonne
这篇文章主要介绍了vue3中的 $attrs 与 Attributes 继承的相关资料,首先介绍了什么是Attributes 继承,结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
vue3中的 $attrs 与 Attributes 继承
官方文档：https://cn.vuejs.org/guide/components/attrs.html#attribute-inheritance
首先介绍一下什么是 Attributes 继承，即属性继承！
当一个父组件给子组件绑定属性时（props属性、class属性、自定义事件、style属性等等）
// 父组件
<Demo
@click="fn1"
@getname="fn2"
numm="111"
:name="slotName"
class="abc"
>
</Demo>子组件的根元素（即最外层的元素）会自动继承除去 props、emits 之外的属性
而这些属性都被封装到了 $attrs 对象上
// demo.vue
<template>
<div>
{{ $attrs }}
</div>
</template>
<script setup>
import { ref, useAttrs } from 'vue'
const props = defineProps({
name: String
})
let attrs = useAttrs()
console.log(attrs)
</script>
attrs = Proxy {numm: ‘111’, class: ‘abc’, __vInternal: 1, onClick: ƒ, onGetname: ƒ}
$attrs：
这个 $attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。
禁用 Attributes 继承：取消根节点自动继承
// 需要额外加上一个配置
<script>
export default {
inheritAttrs: false,
}
</script>
<script setup>
import { ref, useAttrs } from 'vue'
const props = defineProps({
name: String
})
ref(12)
let attrs = useAttrs()
console.log(attrs)
</script>v-bind=$attrs
实现孙组件的 Attribute 继承
我们想要所有的透传 attribute 都应用在内部的元素中， 而不是外层的根节点上。我们可以通过设定 inheritAttrs: false 和使用 v-bind="$attrs" 来实现
<div class="btn-wrapper"> <button class="btn" v-bind="$attrs">click me</button> </div>
没有参数的
v-bind会将 $attrs 的所有属性都作为 attribute 应用到目标元素上
到此这篇关于vue3中的 $attrs 与 Attributes 继承的文章就介绍到这了,更多相关vue3 $attrs 与 Attributes 继承内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了解决VUE同一路由强制刷新页面的问题，本文给大家分享实现过程，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue前端打包的详细流程,下面文章围绕Vue前端打包的相关资料展开详细内容,需要的小伙伴可以参考一下，希望对大家有所帮助2021-11-11
这篇文章主要介绍了vue如何向后台传递日期，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue3渲染函数(h函数)的变化,文中给大家介绍了h函数的三个参数详细说明及vue3 h函数-绑定事件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了8个非常实用的Vue自定义指令，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
vue-cli3.0移除了配置文件目录： config和build文件夹。可以说是非常的精简了，那移除了配置文件目录后如何自定义配置环境变量和模式呢?这篇文章主要介绍了vue-cli3.0 环境变量与模式 ,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了vue基础之模板和过滤器用法,结合实例形式分析了vue模板与过滤器的功能、使用方法及相关操作注意事项,需要的朋友可以参考下2019-03-03
插槽，也就是slot，是组件的一块HTML模板，这块模板显示不现实、以及怎样显示由父组件来决定。这篇文章主要介绍了浅析vue插槽和作用域插槽的理解,需要的朋友可以参考下2019-04-04
vue.js出现Vue.js not detected错误的解决方案
这篇文章主要介绍了vue.js出现Vue.js not detected错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
ref和reactive一样,也是用来实现响应式数据的方法,下面这篇文章主要给大家介绍了关于vue3给动态渲染的组件添加ref的解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
最新评论