脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3  $attrs 与 Attributes 继承

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 Cli 环境删除与重装教程 - 版本文档

    vue Cli 环境删除与重装教程 - 版本文档

    这篇文章主要介绍了vue Cli 环境删除与重装教程 - 版本文档，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 23个不可错过的Vue3实用Hook

    23个不可错过的Vue3实用Hook

    @vueuse/core提供了丰富的功能性钩子,使得处理常见的开发任务变得更加简洁和高效,本文将详细介绍如何在Vue3项目中使用 @vueuse/core及其一些极具价值的功能,需要的可以参考下
    2024-11-11
  • Vue预渲染：prerender-spa-plugin生成静态HTML与vue-meta-info更新meta

    Vue预渲染：prerender-spa-plugin生成静态HTML与vue-meta-info更新meta

    Vue.js中,prerender-spa-plugin和vue-meta-info插件的结合使用,提供了解决SEO问题的方案,prerender-spa-plugin通过预渲染技术生成静态HTML,而vue-meta-info则能动态管理页面元数据,本文将探讨如何使用这两个工具优化Vue.js项目的SEO表现,包括安装、配置及注意事项
    2024-10-10
  • Vue项目中数据的深度监听或对象属性的监听实例

    Vue项目中数据的深度监听或对象属性的监听实例

    这篇文章主要介绍了Vue项目中数据的深度监听或对象属性的监听实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 从零打造一个丝滑的Vue3的返回顶部组件

    从零打造一个丝滑的Vue3的返回顶部组件

    本文介绍了一个使用Vue3开发的返回顶部组件,具有智能显示,丝滑动画,平滑滚动和类型安全等特性.文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
    2026-04-04
  • 代码详解Vuejs响应式原理

    代码详解Vuejs响应式原理

    这篇文章主要介绍了代码详解Vuejs响应式原理的基础知识，有兴趣的朋友们参考学习下吧。
    2017-12-12
  • 浅谈Vue.use到底是什么鬼

    浅谈Vue.use到底是什么鬼

    这篇文章主要介绍了浅谈Vue.use到底是什么鬼，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • WebSocket用法与在 Vue 中的使用指南

    WebSocket用法与在 Vue 中的使用指南

    文章介绍了WebSocket协议的基础概念、特点及与HTTP的区别,详解了在Vue中的集成方式（组件内/插件封装/Vuex管理）,并涵盖连接管理、安全性、数据格式等最佳实践,列举了Socket.IO和SockJS等常用库,适用于实时通信场景,感兴趣的朋友一起看看吧
    2025-08-08
  • vue实现在线进制转换功能

    vue实现在线进制转换功能

    这篇文章主要介绍了vue实现在线进制转换功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2025-04-04
  • vue 集成 vis-network 实现网络拓扑图的方法

    vue 集成 vis-network 实现网络拓扑图的方法

    这篇文章主要介绍了vue 集成 vis-network 实现网络拓扑图的方法，本文通过实例代码给大家介绍的非常详细 ,需要的朋友可以参考下
    2019-08-08

最新评论