开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

inheritAttrs: false和$attrs在Vue中的用途是什么？

inheritAttrs: false是Vue组件选项之一，用于控制组件是否继承父组件的属性。当设置为false时，子组件将不会继承父组件的非props属性。

$attrs是Vue实例的一个属性，它包含了父作用域中不被子组件props所识别（即非props属性）的属性。在子组件中，可以通过$attrs来访问这些属性。

综合起来，inheritAttrs: false和$attrs在Vue中的用途是为了控制组件的属性继承和访问。当我们希望子组件不继承父组件的非props属性时，可以在子组件中设置inheritAttrs: false。然后通过$attrs来访问父组件传递的非props属性，以便在子组件中使用这些属性。

这种用法在以下场景中特别有用：

当父组件传递了一些额外的属性，但子组件并不需要使用这些属性时，可以通过设置inheritAttrs: false来避免属性的继承，减少不必要的属性传递和处理。
当子组件需要将接收到的非props属性传递给内部的子组件时，可以使用$attrs来传递这些属性，实现属性的透传。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云云数据库MySQL版、腾讯云对象存储（COS）等。

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos

相关搜索:"SELECT <somevalue>“在SQL中的用途是什么？'#‘字符在jhipster中的用途是什么？'MessagesApi`在play框架中的用途是什么 @content在Sass中的用途是什么？DummyOperator在气流中的用途是什么？ElementLocatorFactory和FieldDecorator在页面工厂中的用途是什么？Laravel中any()和all()方法的用途是什么？LinearLayoutManger在RecyclerView中的用途是什么？parserJob在Apache Nutch中的用途是什么？VUE.js中插槽的各种用途是什么

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Vue中的$attrs和$listener的使用

前面讲了关于vue组件间数据传递，如果没有看过，关注公众号，有历史推荐，讲的比较详细，有代码，新手也能看懂，今天说一说attrs和listener。...这次我们用attrs和 $attrs 官方解释：包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。...当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。...通俗易懂的说就是用$attrs可以获取父组件传递过来的所有属性，不包含class，style和props中接收的。...来接收来自父组件的信息在子组件中调用孙子组件，绑定$attrs，孙子组件就可以直接接收父组件的内容多层传递省时省力 $listener 官方解释：包含了父作用域中的 (不含 .native 修饰器的

1.1K11 10

Vue 新增的$attrs与$listeners的详解

名词解释 inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs...: false,但是class属性会继承（简单的说，inheritAttrs：true 继承除props之外的所有属性；inheritAttrs：false 只继承class属性） $attrs--继承所有的父组件属性...（除了prop传递的属性、class 和 style ），一般用在子组件的子元素上，如第一个例子的 $listeners--属性，它是一个对象，里面包含了作用在这个组件上的所有监听器...-2.5.13.js"> Vue.component("base-input", { inheritAttrs: false, //此处设置禁用继承特性...-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） --> <child2 v-bind="$<em>attrs</em>" v-on

2.6K5 0

Vue2中的$attrs和$listener和provide和inject

/views/Bpp.vue" export default { name: "App", data() { return { msg1: "歌谣爱你呀1",.../Cpp.vue" export default { name: "B", props: ['msg1'], data() { return {}...$emit('method2') } }, mounted() {}, } 定义$attrs 当一个组件没有声明任何 prop 时，$attrs...会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件，一般用在子组件的子元素上运行结果定义$listeners...包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。

781 0

Vue2.4中$attrs和$listeners的使用-学习笔记

本来自定义一个Vue 中央数据总线，这个情况适合碰到组件跨级传递消息，但是使用VueX感觉又有点浪费的项目中，但是缺点是，碰到多人合作时，代码的维护性较低，代码可读性低在很多开发情况下，我们只是想把...在vue2.4中，为了解决该需求，引入了attrs 和listeners ，新增了inheritAttrs 选项。...中新增选项inheritAttrs inheritAttrs的默认值为true, 将inheritAttrs的值设为false, 这些默认的行为会禁止掉。...:false } 输出的结果如下从上面的代码，可以看出使用$attrs ，inheritAttrs 属性能够使用简洁的代码，将A组件的数据传递给C组件，该场景的使用范围还是挺广的...vue2.4版本新增了listeners 属性，我们在b组件上绑定 v-on=”listeners”, 在a组件中，监听c组件触发的事件。就能把c组件发出的数据，传递给a组件。

9126 0

Vue 父子组件数据传递( inheritAttrs + $attrs + $listeners)

props 的方式向子组件传递(父子组件) vuex 进行状态管理(父子组件和非父子组件) vuex 非父子组件的通信传递 Vue Event Bus，使用Vue的实例，实现事件的监听和发布...后来再逛社区的时候我又发现了还有第四种传递方式，inheritAttrs + $attrs + $listeners 附上原文链接Vue2.4版本中新添加的attrs以及listeners属性使用和...在实践的采坑中体会更有意思 inheritAttrs + $attrs + $listeners inheritAttrs ：默认是 true 我的解释就是：没有被子组件继承的父组件属性，不会当做特性展示在子组件根元素上面...说起来，听起来好像有些拗口，看截图看代码你就明白了 inheritAttrs :false ? ? inheritAttrs :false ? ?...$listeners 我的理解就是：子组件可以触发父组件的事件（不需要用什么那些麻烦的vuex或者一个空的 Vue 实例作为事件总线，或者又是什么vm.$on ) ?

1.5K3 0

vue $listeners $attr_vue query

简单点讲就是包含了所有父组件在子组件上设置的属性（除了prop传递的属性、class 和 style ）。...$attrs); } }); const app = new Vue({ el: "#app" }); 在生命周期方法mounted中打印attrs,显示除了class和props定义的属性之外的其他属性...父组件在child1组件中设置两个监听事件test1和test2,分别在child1组件和child1组件内部的child2组件中执行。...组件中的attrs和listeners打印的内容 3、inheritAttrs 2.4.0新增类型 boolean 默认值：true 详细默认情况下父作用域的不被认作 props 的特性绑定 (attribute...inheritAttrs设置为false，不影响attrs,子组件通过注意：这个选项不影响 class 和 style 绑定。 vm.

3.7K1 0

vue $attrs的使用

$attrs的使用 vue $attrs是在vue的2.40版本以上添加的。项目中有多层组件传参可以使用attrs，可以使代码更加美观，更加简洁，维护代码的时候更方便。...可以获取到没有使用的注册属性, “inheritAttrs: false`是不会影响 style 和 class 的绑定以下是$attrs的使用示例（父组件的列表行数据传递给孙子组件展示）父组件（...），中间层，作为父组件和孙子组件的传递中介，在儿子组件中给孙子组件添加v-bind="$attrs"，这样孙子组件才能接收到数据 ...dom上显示属性 inheritAttrs: false, // 在本组件中需要接收从父组件传递过来的数据，注意props里的参数名称不能改变，必须和父组件传递过来的是一样的 props: { isShow...，子组件不使用props接收，那么这些数据将作为子组件的特性，这些特性绑定在组件的HTML根元素上，在vue2.40版本之后，可以通过inheritAttrs = false 来控制这些特性是否显示在dom

1.3K6 0

在 Vue 中，使用 $attrs 构建高级组件

这节课，我们来看下 Vue3 中的 $attrs 属性。首先，我们会介绍它的用途以及它的实现与 Vue2 有哪些不两同点，并通过事例来加深对它的理解。...$attrs 也可以被看作是一个安全网，它可以捕获任何我们没有在组件中声明的东西。...对象中不包含 class 属性而 Vue3 中的 attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，这有利于我们方便使用这些属性。...$attrs 救场在本文的开头，我们介绍了 $attrs。它是一个存放所有 "未声明"的属性和事件的地方，而这正是我们需要解决的问题。...inheritAttrs: false 默认情况下，任何被传递给组件的额外参数都会自动应用于根元素（以及所有有 $attrs 绑定的元素）。

2.4K1 0

Vue中 $attrs、$listeners 详解及使用

之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的情况下变得简洁，业务清晰。...props 的方式向子组件传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现；通过设置全局 Vuex 共享状态，通过 computed 计算属性和 commit mutation...的方式实现数据的获取和更新，以达到父子组件通信的目的； Vue Event Bus，使用 Vue 的实例，实现事件的监听和发布，实现组件之间的传递；往往数据在不需要全局的情况而仅仅是父子组件通信时，...的出现解决的就是第一种情况的问题，B 组件在其中传递 props 以及事件的过程中，不必在写多余的代码，仅仅是将 $attrs 以及 $listeners 向上或者向下传递即可。...（简单的说，inheritAttrs：true 继承除 props 之外的所有属性；inheritAttrs：false 只继承 class style 属性） $attrs–继承所有的父组件属性

1.5K8 0

如何构建运行良好的Vue组件

另一方面，因为这些组件中的大多数是从特定的情况而来的，并且不是所有人都有跨多重环境重用组件的设计经验，所以这些组件中的许多东西都不能很好地与Vue生态系统配合使用。 “很好”是什么意思？...为此，我们告诉组件默认情况下不要应用属性，而是直接使用$attrs对象应用它们，在 JS 代码中： export default { inheritAttrs: false, } 在模板中 <div...: false和v-bind="$attrs"，浏览器得到的结果如下 ?...此处有两处异常：父组件中设置的placeholder等属性没有传到子组件；父组件设置的属性传递给了子组件的根元素，即label，而label是不需要的 attrs和inheritAttrs:false...即分别用来解决这两个问题首先，inheritAttrs:false解决子组件的根元素继承父元素的属性；其次，子组件中添加了v−bind=" 接受浏览器的键盘导航规范可访问性和键盘导航是Web开发中最常被遗忘的部分之一

3.7K2 0

Vue 2.3、2.4 知识点小结

> 新增 comments 选项，当设为 true 时，将会保留且渲染模板中的 HTML 注释；该选项暂时无法在构建工具中使用 issues。...如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点杀鸡用牛刀，Vue 2.4 版本提供了另一种方法，使用 v-bind="$attrs", 将父组件中不被认为 props特性绑定的属性传入子组件中.../childCom2.vue') export default { props: ['foo'], inheritAttrs: false, created () {.../childCom3.vue') export default { props: ['boo'] inheritAttrs: false, created () {...listeners 的用法和 attrs 类似，demo6 。完。

1751 0

Vue组件间的通信方式浅析

前言在Vue组件库开发过程中，Vue组件之间的通信一直是一个重要的话题，虽然官方推出的 Vuex 状态管理方案可以很好的解决组件之间的通信问题，但是在组件库内部使用 Vuex 往往会比较重，本文将系统的罗列出几种不使用...因为在 ComponentC 的props 中声明了 name 属性，$attrs 会自动排除掉在 props 中声明的属性，并将其他属性以对象的形式输出。...说白了就是一句话，**$attrs 可以获取父组件中绑定的非 Props 属性**。一般在使用的时候会同时和 inheritAttrs 属性配合使用。...**如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false**。...在 ComponentB 添加了 inheritAttrs=false 属性后，ComponentB 的dom结构中可以看到是不会继承父组件传递过来的属性： image.png 如果不加上 inheritAttrs

1.6K1 0

vue组件通信6种方式总结（常问知识点）1

前言在Vue组件库开发过程中，Vue组件之间的通信一直是一个重要的话题，虽然官方推出的 Vuex 状态管理方案可以很好的解决组件之间的通信问题，但是在组件库内部使用 Vuex 往往会比较重，本文将系统的罗列出几种不使用...因为在 ComponentC 的props 中声明了 name 属性，$attrs 会自动排除掉在 props 中声明的属性，并将其他属性以对象的形式输出。...说白了就是一句话，$attrs 可以获取父组件中绑定的非 Props 属性。一般在使用的时候会同时和 inheritAttrs 属性配合使用。...如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false。...在 ComponentB 添加了 inheritAttrs=false 属性后，ComponentB 的dom结构中可以看到是不会继承父组件传递过来的属性：图片如果不加上 inheritAttrs=false

5723 0

vue3与vue2的区别

, render}) v-model代替以前的v-model和.sync vue3中v-model的用法要求: 3.1. props属性名任意，假设为x 3.2....props.value) } return {toggle} } Vue3中的属性绑定默认所有属性都绑定到根元素使用inheritAttrs: false可以取消默认绑定使用[...使用场景在vue2中我们在父组件绑定click事件，子组件必须内部触发click，而vue3中在父组件绑定子组件的根元素上也会跟着绑定 ButtonDemo.vue 你好 setup() {...{ inheritAttrs: false } 如果想要一部分属性绑定在button上一部分在div上就需要在setup里 Button.vue <template...(image-92bd2b-1628264866650)] 上图中我们在props里声明了size，所以attrs里就没有size了当我们在html标签中只写属性而不赋值的时候，props支持string

6521 0

Vue 组件间的通信方式

前言在 Vue 组件库开发过程中，Vue 组件之间的通信一直是一个重要的话题，虽然官方推出的 Vuex 状态管理方案可以很好的解决组件之间的通信问题，但是在组件库内部使用 Vuex 往往会比较重，本文将系统的罗列出几种不使用...因为在 ComponentC 的 props 中声明了 name 属性，$attrs 会自动排除掉在 props 中声明的属性，并将其他属性以对象的形式输出。...说白了就是一句话，$attrs 可以获取父组件中绑定的非 Props 属性。一般在使用的时候会同时和 inheritAttrs 属性配合使用。...如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false。...在 ComponentB 添加了 inheritAttrs=false 属性后，ComponentB 的 dom 结构中可以看到是不会继承父组件传递过来的属性：如果不加上 inheritAttrs=false

4182 0

四个Vue的写法优化技巧

watch的优化写法我们平时总会遇到组件创建时获取列表，筛选项改变后刷新列表的需求，在watch中的逻辑，还要在组件的created()中再执行一遍，以下写法解决此痛点。...在开发大型应用时，很多页面用到很多公共UI库的组件，按照Vue原本的写法，每种组件都要在每个页面引用一次，真是好累，如何省事偷懒呢？...// allImport.js import Vue from 'vue' function capitalizeFirstLetter(string) { // 此函数用途是首字符大写，baseInput...注意：默认父作用与不被认为是props的属性将会回退到子组件的根元素上，也就是例子中的label上，需在当前子组件的Vue内部设置inheritAttrs: false good export default { inheritAttrs: false, computed: { selfListeners()

1.5K6 0

『前端工程』—— 封装第三方组件的三板斧

$attrs : 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。...当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件 //myInput.vue <template...inheritAttrs 选项设置为 false ，为什么呢，来看一下 inheritAttrs 选项的官方定义就明白了。...简单来说，把 inheritAttrs 设置为 false ， v-bind="$attrs" 才生效。...组件的 mounted 会比myInput组件的 mounted 先执行，所以可以在myInput组件的 mounted 中把 this.

7511 0

Vue2高版本新特性的总结及其使用

“vue-loader”: “^12.2.0” 在项目开发中，如果业务比较复杂，特别像中台或B端功能页面都不可避免的会用到第三方组件库，产品有时会想对这些组件进行一些UI方面的定制。...二、组件配置项inheritAttrs、组件实例属性$attrs和$listeners 2.4.0新增组件配置项 inheritAttrs 官方文档： https://cn.vuejs.org/v2...选项只声明了a和b，那么渲染后c将作为html自定义属性显示在子组件的根元素上。...如果不希望这样，可以设置子组件的配置项 inheritAttrs:false，根元素就会干净多了。...$attrs是组件的内置属性，值是父组件传入的所有prop中未被组件声明的prop(class和style除外)。

8622 0

Vue案例引发的「嵌套组件」通信的简单方式

既然项目中存在很多的组件，而且又是相对独立的，但组件间肯定是存在数据的传递交互。Vue中给我提供比较多的方式去进行组件间的交互通信。...不过 Vue 在 2.4.0 版本添加了 2 个属性「$attrs」与「$listeners」，使用它们进行嵌套组件（祖孙）的通信是一个不错的选择，接下来我们就看看它们是什么，以及如何使用。 1....当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。...简单来说：$attrs 与 $listeners 是两个「对象」，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。...那如何避免的呢？很简单，你可以在组件的选项中设置 inheritAttrs: false。 import ComponentC from ".

8662 0

Vue 3 非 Props 的Attribute

例如，在组件的实例中，就是用我们上节课 TestCom.vue 的代码 <test-com...$attrs) } }; 在 test-com 组件添加事件监听器： <test-com...禁用 Attribute 继承如果你「不」希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false。...通过将 inheritAttrs 选项设置为 false，你可以访问组件的 $attrs property，该 property 包括组件 props 和 emits property 中未包含的所有属性...: false, template: ` Yesterday

1.3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭