vue3中$attrs的变化与inheritAttrs的使用详解

目录

• 在vue3中的$attrs的变化
• 在vue2中的$attrs
• 父组件的属性直接渲染在根节点上

在vue3中的$attrs的变化

$listeners已被删除合并到$attrs中。 $attrs现在包括class和style属性。 也就是说在vue3中$listeners不存在了。vue2中$listeners是单独存在的。 在vue3 $attrs包括class和style属性, vue2中 $attrs 不包含class和style属性。

在vue2中的$attrs

在Vue 2中，attrs里面包含着上层组件传递的所有数据(除style和class) 当一个组件声明了prop时候，attrs里面包含除去prop里面的数据剩下的数据。 结合inheritAttrs:false，可以将传递下来的数据应用于其他元素，而不是根元素：

父组件的属性直接渲染在根节点上

父页面.vue

子组件.vue

我们发现父组件中的属性直接是渲染在了

这个节点上。 变为了

。 因为在默认情况下，父组件的属性会直接渲染在子组件的根节点上。【重点】 然后有些情况我们希望是渲染在指定的节点上。那怎么处理这问题呢？ 我们的 $attrs 和 inheritAttrs: false 这一对 ”好基友“ 闪亮登场

如何让父组件的属性渲染在指定的节点上

我们可以使用 $attrs 配合 inheritAttrs: false 可以将属性渲染在指定的节点上
子组件的代码中新增 inheritAttrs: false
//子组件

发现问题-根节点和指定节点都别渲染了属性

好家伙，你不是说 $attrs 配合 inheritAttrs: false可以将属性渲染在指定的节点上。 现在虽然渲染在指定节点上。但是根节点也有。这样不好吧。切。走了。走了。菜鸡。 这，这，这， 你别走呀。 等一会。赶紧偷偷人偷偷去官网看一下出怎么说的。 原来是这样的:

TM又又发现问题了

在浏览器中提示：[plugin:vite:vue] [@vue/compiler-sfc] 

简单的介绍 $listeners

$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。 它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。 我的理解：因为$listeners 可以接收父级组件中(不含.native修饰器的) v-on 事件监听器. 所以在进行组件事件传递的时候非常有用。 很多时候我们对组件进行二次封装的时候不可能将组件中的内置事件都抛出来。 这个时候 $listeners 就派上用场了。 在vue2中有 vue2中$listeners是单独存在的。vue3 被合并到$attrs中了。

vue2中 v-bind="$attrs" 和 $listeners

//子组件.vue

//父组件.vue

vue3 v-bind="$attrs" 会接收属性和事件

//子组件




ps:我们没有向上抛出任何事件。
但是父组件可以调用 Element Plus 中对话框中的内置方法。
但是父页面中可以 注册 Element Plus 中对话框中的内置方法。

// 父组件

到此这篇关于vue3中$attrs的变化与inheritAttrs的使用 的文章就介绍到这了,更多相关vue3 $attrs与inheritAttrs的使用 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！