Прозрачные атрибуты / $attrs в Vue3: мощный инструмент для упрощения разработки компонентов

предисловие

Vue3 представляет множество новых функций и улучшений. После его использования одна из очень практичных новых функций — прозрачные атрибуты передачи (прозрачные атрибуты передачи). В этой статье будут представлены атрибуты прозрачной передачи в Vue3 и приведены примеры кода, демонстрирующие их использование в реальных проектах.

1. Что такое атрибуты прозрачной передачи?

В Vue родительские компоненты могут передавать данные дочерним компонентам через свойства (реквизиты), чтобы управлять поведением и внешним видом дочерних компонентов. Однако в некоторых случаях мы хотим передать свойства родительского компонента непосредственно в теги HTML внутри дочернего компонента или пользовательских компонентов .

Раньше нам приходилось вручную передавать эти атрибуты слой за слоем, но теперь Vue 3 вводит сквозные атрибуты, чтобы упростить этот процесс.

Сквозные атрибуты позволяют компоненту автоматически передавать необъявленные реквизиты родительского компонента непосредственно корневому элементу дочернего компонента или другому указанному элементу . Это означает, что вы можете более легко получить доступ к свойствам родительского компонента в дочернем компоненте, не передавая их вручную слой за слоем.

Объяснение официального китайского сайта Vue3

2. Как использовать атрибуты прозрачной передачи?

1. Специальное использование

• Родительский компонент: передавать атрибуты напрямую

<template>
  <div>
    <ChildComponent name="John Doe" age="25" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

• Подкомпоненты: используйте $attrs или useAttrs() для получения атрибутов

<template>
  <div>
    <h2>{
   
   { name }}</h2>
    <p>{
   
   { $attrs.age }}</p>
    <!-- 在模板的表达式中直接用 $attrs 访问到 -->
    <p>{
   
   { attrs.age }}</p>
  </div>
</template>

<script setup>
  // 在js里 使用 useAttrs() API 来访问到
  import { useAttrs } from 'vue'

  defineProps({
    name: String
  })

  const attrs = useAttrs()
  console.log(attrs)
</script>

Распечатать:

В приведенном выше примере у нас есть родительский компонент, который представляет дочерний компонент в шаблоне <ChildComponent>. Родительский компонент передает дочернему компоненту два свойства: nameи age.

В дочернем компоненте мы использовали propsобъект для объявления nameсвойства, но не объявляли ageсвойство. В это время ageатрибут будет рассматриваться как прозрачные атрибуты, а напечатанное содержимое и визуализированный тег p содержат значение необъявленного Props, переданного родительским компонентом age.

Прозрачно передавая атрибуты, мы можем легко получить доступ к свойствам родительского компонента в дочернем компоненте, не объявляя и не передавая их вручную.

2. Меры предосторожности

Когда компонент визуализируется с одним элементом в качестве корня, атрибут прозрачности будет автоматически добавлен к корневому элементу. Компоненты с несколькими корневыми узлами не имеют режима автоматической прозрачной передачи атрибутов. Если  $attrs явно не привязано или не используется, будет выдано предупреждение во время выполнения.

Измените подкомпонент выше, чтобы добавить корневой узел div:

<template>
  <div>
    <h2>{
   
   { name }}</h2>
  </div>
  // 多了一个根元素
  <div></div>
</template>

<script setup>
  defineProps({
    name: String
  })
</script>

В это время сообщение об ошибке указывает: vueVue не знает, куда прозрачно передать атрибут.

Обходной путь: нет предупреждения, если $attrs явно привязан или используется, или и то, и другое.

<template>
  <!-- 显示绑定 -->
  <div v-bind="$attrs">
    <h2>{
   
   { name }}</h2>
  </div>
  <div>
    <!-- 使用 -->
    <p>{
   
   { $attrs.age }}</p>
  </div>
</template>

<script setup>
  defineProps({
    name: String
  })
</script>

Некоторые люди могут быть сбиты с толку: поскольку верхний div отображается и привязывается, нижний div по-прежнему может использовать атрибуты через $attrs, так в чем же заключается функция привязки отображения? Разве это не лишнее?

вообще-то нет. Давайте изменим родительский компонент и добавим атрибут id, оставив дочерний компонент без изменений:

<template>
  <div>
    <ChildComponent id="custom-layout" name="John Doe" :age="25" />
  </div>
</template>

<script setup>
  import ChildComponent from './ChildComponent.vue'
</script>

В это время вы можете видеть, что атрибут id, переданный родительским компонентом, автоматически добавляется к элементу, привязанному отображением v-bind.

3. Практическое применение атрибутов прозрачной передачи

1. Интеграция с внешней библиотекой

Когда мы используем внешние библиотеки или сторонние компоненты, нам может потребоваться передать некоторые свойства этим компонентам для настройки или настройки. Сквозные атрибуты могут легко передавать атрибуты родительского компонента напрямую во внешние библиотеки или сторонние компоненты.

<template>
  <div>
    <ThirdPartyComponent v-bind="$attrs" />
  </div>
</template>

<script setup>
import ThirdPartyComponent from 'third-party-library';
</script>

В приведенном выше примере мы используем функцию $attrs, чтобы получить все необъявленные реквизиты родительского компонента и передать их непосредственно стороннему компоненту с именем ThirdPartyComponent.

2. Компоненты высшего порядка

Прозрачные атрибуты также можно использовать при разработке компонентов более высокого порядка. Компонент более высокого порядка — это компонент, который принимает некоторые дополнительные реквизиты и передает эти реквизиты своим внутренним дочерним компонентам.

<template>
  <div>
    <WrappedComponent v-bind="$attrs" />
  </div>
</template>

<script setup>
import WrappedComponent from './WrappedComponent.vue';
</script>

В приведенном выше примере мы создали компонент более высокого порядка и использовали attrsфункцию для получения всех необъявленных реквизитов родительского компонента и передачи их непосредственно дочернему компоненту WrappedComponent.

3. Динамические компоненты

При использовании динамических компонентов сквозные атрибуты позволяют передавать свойства родительского компонента динамически отображаемому компоненту.

<template>
  <div>
    <component :is="dynamicComponent" v-bind="$attrs" />
  </div>
</template>

<script setup>
const dynamicComponent = 'ChildComponent';
</script>

В приведенном выше примере мы использовали динамические компоненты для рендеринга различных компонентов в зависимости от условий. Через :isи v-bindмы можем прозрачно передать все необъявленные свойства родительского компонента в динамически отображаемый компонент.