vue3_硅谷甄选_useAttrs获取所有属性和事件

useAttrs方法

在vue3当中提供了useAttrs方法，可以获取到子组件的属性和事件；

element-plus就是element-ui的升级版本，在vue3的框架当中去使用；

需求

我们想要将element-plus当中已经有的el-button组件进行二次封装；

在这个基础上，学习一下useAttrs方法；

el-button组件身上有很多的属性和事件；

这是element-ui提供的图标组件；

这就是图标的效果；

需求

我想要自己封装一个组件，将他们的el-button按钮进行二次封装；

还要加一个需求，鼠标放上去的时候，有一个文字的指示；

自己封装一个组件

我希望做到的是我们自己封装的HintButton，这里头的属性和事件，都要和el-button都是一样的；

那么理论上，我们应该在子组件内部，使用上述的写法，来进行属性的接收；

但是你可以不用props去接收属性，可以使用vue3使用useAttrs来接收；

---

import {useAttrs} from 'vue'
let $attrs = useAttrs();
console.log($attrs);

useAttrs是一个方法，方法的返回值是一个对象，我们可以看到：

所以useAttrs就类似props，所以也算是一种组件通信方式之一；

那么属性的写法，我们就可以使用下面的方式：

我们也可以使用下面的，更为直接的写法：

效果如上所示；

语法讲解

上面两张图当中的，语法的效果是一样的；

需求回顾

我希望做到的效果，就是对于el-button进行二次封装，当我的鼠标悬浮这个按钮的时候，会有一个提示；

提示就是文字提示的；

这样你的鼠标放上去的时候，就有上述的提示了；

注意点

props和useAttrs方法都是可以接收父组件传递过来的属性和属性值，但是props接收了之后useAttrs方法就获取不到了；

其实useAttrs方法很类似vue2当中，组件实例身上的$attrs属性；

useAttrs比vue2的$attrs强大在可以捕捉事件

说明

useAttrs方法也算是组件通信方式之一的，有点类似于props；