在Vue中，使用$attrs构建高级组件
时间：2023-03-16 16:28:58
科技观察
//这里省略一堆样式，大家自己看例子本节课，我们来了解一下Vue3中的$attrs属性。首先，我们将介绍它的用途以及它的实现与Vue2的区别，并通过实例加深对它的理解。真正理解$attrs属性有助于我们构建易于使用和可扩展的高级组件。$attrs到$attrs的定义是什么？Vue2与Vue3不同。这里主要介绍Vue3的版本：$attrs对象包含组件声明的除了props和emits之外的所有其他属性，比如class，style，v-onlisteners等。$attrs也可以看做是一张安全网，捕捉我们没有在组件中声明的任何东西。让我们考虑一个只有一个属性和事件处理程序的组件，如下所示：{{title}}/template>如果你像这样在父组件中实例化上面的组件：
如果我们在组件中打印出$attrs，我们将得到以下内容：{id:'myId',class:'myClass','data-cy':'cypress-testing',description:'Nopropsdeclared',onBlur:()=>{//todo}}上面的信息看似没用，其实不然。我们将在下面介绍如何使用这些信息。attrsV3vs$attrsV2这一节我们来看看Vue2和Vue3中attrs属性的区别。先看图：与Vue2的区别主要是：自定义事件放在@listerner对象中，没有class属性Vue3中的attrs对象包含了组件声明的props和emits以外的所有其他属性，方便供我们使用这些属性。让我们看一些例子。示例示例地址：https://stackblitz.com/edit/vue-slider-listener-example?file=src/components/Slider.vue首先我们创建一个Slider组件，内容如下：
//这里省略一堆样式，大家自己看例子上面的代码我们创建了一个同样实现了双向绑定的滑块。然后这个组件可以这样使用：添加一些属性我们现在的Slier组件还是很简单的，不太现实。因此，我们添加了几个属性（min、max、class、id、data-cy、@keydown和aria-label）。true"运行aria-label="Exampleslider"/>之后，我们可以通过控件查看元素，可以看到我们新添加的属性已经添加到HTML元素中了：看到这里，你可能会有疑惑，因为所有的“Non-attribute/event"属性已经自动应用于内部HTML元素，那么为什么要对$attrs做这么大的介绍呢？添加标题和值添加要求：作为滑块的用户，用户希望能够在屏幕上看到标题及其显示为数字的值。我们正在调整Slider组件，内容如下：//Slider-2.vue{{title}}
值：{{值}}
/template>乍看之下，似乎没什么不对，但仔细一看，又发现不对劲。首先，滑块不是蓝色的。其次，该值远远超过50。最后，检查HTML，我们看到我们所有的额外属性（min、max、data-cy）都分配给了根元素，而不是我们的input元素。解决上述问题最好的办法就是想办法把所有的属性、类、参数和事件直接“应用”到输入域，而不用我们手动一一声明。这就是$attrs的用武之地。$attrs的救星在本文的开头，我们介绍了$attrs。这是所有“未声明的”属性和事件的地方，这就是我们需要修复的地方。要使用此功能，我们只需使用v-bind运算符将$attrs属性应用于一个或多个HTML元素。
