首页>国内 > 正文

【天天新要闻】在 Vue 中,使用 $attrs 构建高级组件

2022-09-20 20:51:16来源:大迁世界

这节课,我们来看下 Vue3 中的$attrs属性。首先,我们会介绍它的用途以及它的实现与 Vue2 有哪些不两同点,并通过事例来加深对它的理解。

真正理解了$attrs属性有助于我们构建易于使用和可扩展的高级组件


(资料图片)

什么是$attrs

对$attrs定义, Vue2 与 Vue3 是不一样的,这里我们主要来介绍 Vue3 的版本:

$attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute,例如 class,style,v-on 监听器等等。

$attrs也可以被看作是一个安全网,它可以捕获任何我们没有在组件中声明的东西。我们考虑一个只有一个属性和事件处理程序的组件,如下所示:

<script>export default {  name: "Example",  props: ["title"],  emits: ["custom"],}</script>

如果在父组件中像下面这样实例化上面的组件:

<script setup>import SimpleEvent from "./components/Button.vue"const onBlur = () => {  // todo}const onCustom = () => {  // todo}</script>

如果在组件中把$attrs打印出来,我们会得到如下内容:

{  id: "myId",  class: "myClass",  "data-cy": "cypress-testing",  description: "没有声明 props",  onBlur: () => { // todo } }

上面这些信息,感觉没啥用,其实不然,我们下面会介绍如何利用这些信息。

attrs V3 vs $attrs V2

这小节,我们来看下 Vue2 与 Vue3 中的attrs属性的区别,先来看张图:

与 Vue2 的区别主要有:

自定义事件放在@listerner对象中不包含class属性

而 Vue3 中的attrs对象包含了除组件所声明的props和emits之外的所有其他attribute,这有利于我们方便使用这些属性。

下面我们来看些事例。

事例

事例地址:https://stackblitz.com/edit/vue-slider-listener-example?file=src/components/Slider.vue

首先我们创建一个 Slider 组件,内容如下所示:

<script>export default {  name: "Slider-1",  props: {    modelValue: [Number, String],  }};</script>

上面代码我们创建一个slider,还实现了一个双向绑定。然后可以像下面这样使用该组件:

添加一些属性

目前我们的 Slier 组件还很简单,不太符合实际情况。所以,我们添加几个属性(min,max,class,id,data-cy,@keydown和aria-label)。

运行后,通过控制检查元素,我们可以看下,我们新加的属性都被添加到了 HTML 元素上了:

看到这里,大家可能有疑问了,既然所有的 "非属性/事件" 属性都已经自动应用于内部的HTML元素,为什么还要对$attrs做这么大的介绍?

添加标题和值

新增需求:作为一个滑块的使用者,用户希望能够看到一个标题,以及它在屏幕上显示的数字形式的值。

我们在调整一下 Slider 组件,内容如下:

// Slider-2.vue<script>export default {  name: "Slider-2",  props: {    modelValue: [Number, String]    title: [String],    value: [Number, String],  }};</script>

乍一看,好像没啥问题,但如果我们仔细观察,可以看到有些东西是不对的。

首先,Slider 不是蓝色的。第二,value远远超过了50,最后,检查一下HTML,会看到我们所有的额外属性(min, max, data-cy)都被分配给了根元素,而不是我们的input元素。

解决上述问题的最好方法是找到一种方法,将所有的属性、类、参数和事件直接 "应用" 到 input 字段上,而不需我们手动的一个个声明。这就是$attrs出场的地方。

$attrs 救场

在本文的开头,我们介绍了$attrs。它是一个存放所有 "未声明"的属性和事件的地方,而这正是我们需要解决的问题。

要使用这个功能,我们只需将$attrs属性应用于一个或多个HTML元素,使用v-bind操作符。

在组件中,我们使用attrs充当桥梁,将所有的属性(类、属性、属性和自定义事件)复制到一个或多个元素上。Slider 组件又回到了正常模式上了。

还有一个问题--我们添加的属性不仅被分配给了input元素上,也分配给了root元素。

通常情况下,这可能对界面没啥影响,但有的属性确实会生产一些副作用,下面,我们来解决这个问题。

inheritAttrs: false

默认情况下,任何被传递给组件的额外参数都会自动应用于根元素(以及所有有$attrs绑定的元素)。

为了关闭这个功能,并控制哪些元素可接受这个额外的属性,我们可以使用一个名为inheritAttrs的标志,并将其设置为false。

经过这样的改变,我们的HTML就变得漂亮且干净了。所有的额外属性都只作用于input元素。

关键词: 额外属性 我们来看 符合实际情况 其实不然

相关新闻

Copyright 2015-2020   三好网  版权所有