【Vue】$attrs，你可能不知道它！

项目中，你可能会遇到这样一种场景：A组件嵌套B组件，B组件嵌套C组件，现在需要将A组件的数据传递到C组件，该怎么做？

我们一般会想到两种方法：1、使用props将数据从A传递给B，再由B传递给C。2、使用vuex。

使用props逐层传递太过繁琐，使用vuex又有些大材小用。下面将由本文的主角$attrs来教你另一种实现！

使用props进行数据传递是这样的：

如果我们不在子组件中通过props接收，父组件绑定在子组件上的属性会添加到子组件的根元素上

 

 

vue为我们提供了$attrs这一对象，用来接收父组件传递过来且没有使用props接收的属性。

想要传入一个对象的所有property（属性），vue为我们提供了v-bind=""这种语法糖。

结合$attrs与v-bind=""即可将父组件传递过来的数据传递给孙子组件，在孙子组件使用props进行接收，就能方便快捷的实现父组件传递数据给孙子组件这一功能！

补充：因为B组件（儿子组件）没有使用props接收，所以传递的参数会添加在B组件的根元素上。由于我们给B组件绑定了一个title属性，会导致鼠标悬停在B组件上有title提示！ 如果我们不希望组件的根元素继承 这些attribute，我们可以在组件的选项中设置inheritAttrs: false。