Почему во Vue 2 теряются значения this.$attrs?

Question

[EranosyanEduard]

Здравствуйте.

Я работаю над проектом, который разработан на Vue 2 и использует библиотеку Vuetify.

В проекте существует следующая композиция компонентов: SIcon -> VIcon -> VIcon_ (2-а последних принадлежат библиотеке Vuetify). Компонент SIcon написан так, чтобы HTML-атрибуты явно передавались в VIcon - это позволяет использовать props-ы компонента VIcon_.

Я обнаружил, что компонент SIcon может потерять значения HTML-атрибутов, которые являются props-ами компонента VIcon_, если render-функция SIcon вызывается вновь из-за изменения состояния, но не могу понять в чём причина.

Помогите, пжл, разобраться.

Я реализовал пример указанного поведения в репозитории. Запуск проекта npm ci && npm run dev. Обратите внимание, что значение HTML-атрибута color здесь сначала попадёт в компонент VIcon_, но после обновления состояния size в компоненте SIcon он "потеряется".

Comments

[Антон Антон]

А если вообще $attrs убрать и понадеяться на наследование? или в рендер функциях оно не работает? тогда опцию inheritAttrs выключить

[EranosyanEduard]

Антон Антон, в данном случае наследование добавит HTML-атрибуты на корневой HTML-элемент компонента, но они не интерпретируются, как props-ы, поэтому props color не будет иметь эффекта. В док-ии указано, что в таких случаях необходимо явно использовать v-bind="$attrs".

Я обнаружил следующие решения:

1. заменить значение опции attrs с this.$attrs на { ...this.$attrs }

import { defineComponent } from "vue";
import VIcon from "./VIcon";

export default defineComponent({
  inheritAttrs: true,
  data() {
    return { size: 200 };
  },
  mounted() {
    setTimeout(() => {
      this.size *= 2;
    }, 5_000);
  },
  render(h) {
    return h(
      VIcon,
      {
        attrs: { ...this.$attrs },
        props: { size: this.size },
      },
      JSON.stringify(this.$attrs)
    );
  },
});

2. преобразовать компонент SIcon в канонический SFC формат

<template>
  <VIcon v-bind="$attrs" :size="size">
    {{ $attrs }}
  </VIcon>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import VIcon from "./VIcon";

export default defineComponent({
  components: { VIcon },
  data() {
    return { size: 200 };
  },
  mounted() {
    setTimeout(() => {
      this.size *= 2;
    }, 5_000);
  },
});
</script>