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;