Vue中vm.$attrs在哪些具体应用场景下发挥重要作用？

本文共计2327个文字，预计阅读时间需要10分钟。

VM.$attrs 简介：首先我们来了解一下 Vue 官方对 VM.$attrs 的介绍：包含了父作用域中不作为 prop 被识别的特性（且获取）的特性绑定。当组件没有声明任何 prop 时，这些特性将自动包含在内。

1、vm.$attrs简介

首先我们来看下vue官方对vm.$attrs的介绍：
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。
猛一看有点看不明白....

2、场景介绍

vue中一个比较令人烦恼的事情是属性只能从父组件传递给子组件。这也就意味着当你想向嵌套层级比较深组件数据传递，只能由父组件传递给子组件，子组件再传递给孙子组件...像下面这样：

<parent-component :passdown="passdown"> <child-component :passdown="passdown"> <grand-child-component :passdown="passdown"> ....

就这样一层一层的往下传递passdown这个变量，最后才能用{{passdown}}。

假如我们需要传递的属性只有1,2个还行，但是如果我们要传递的有几个或者10来个的情况，这会是什么样的场景，我们会在每个组件不停的props，每个必须写很多遍。