Vue中$attrs的作用和使用方法

本文主要是介绍Vue中$attrs的作用和使用方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue中$attrs的作用和使用方法

1. 使用场景举例
2. 官方解释
3. 使用示例

$attrs是 vue2.4.0版本以上新增的属性；

1. 使用场景举例

假如我们现在要二次封装一个组件，我们需要把当前组件获取到的所有的props都传递给子组件，我们可以在当前组件中接收所有的props，然后将props传递给子组件，这样难免有些繁琐，Vue给我们提供了简单的实现方式，就是$attrs。

2. 官方解释

定义：一个包含了组件所有透传 attributes 的对象。
详细信息：透传 Attributes 是指由父组件传入，且没有被子组件声明为 props 或是组件自定义事件的 attributes 和事件处理函数。
默认情况下，若是单一根节点组件，$attrs 中的所有属性都是直接自动继承自组件的根元素。而多根节点组件则不会如此，同时你也可以通过配置 inheritAttrs 选项来显式地关闭该行为。

3. 使用示例

父组件中调用子组件传入属性：

<template><son-componentmessage="Hello, world!"custom-attribute="hello"></son-component>
</template>

子组件中，通过 v-bind="$attrs" 将从父组件传递过来的属性传递给孙子组件：

// vue3代码示例
<template><grandson-component v-bind:message="props.message" v-bind="$attrs">{{ message }}</div>
</template><script>
export default {name: "Son",components: {grandsonComponent,},props: {message: String,  // 在子组件的props中只声明接收message，不处理customAttribute},setup(props, context) {console.log(context.attrs.customAttribute); // 输出：hello，子组件中未显示接收，但可以在attrs属性中获取到},
};
</script>

孙子组件中通过context.attrs.customAttribute获取到从父组件透传过来的属性：

// vue3代码示例
<template><div>{{ message }}</div>
</template><script>
export default {name: "Son",props: {message: String,  // 在子组件的props中只声明接收message，不处理customAttribute},setup(props, context) {console.log(context.attrs.customAttribute); // 输出：hello，子组件中未显示接收，但可以在attrs属性中获取到},
};
</script>