Встроенные атрибуты Vue3

В Vue.js атрибуты is, key и ref — это три часто используемых встроенных атрибута, которые применяются следующим образом.

Attribute Основная функция Использование/Пример
is Решает ограничения синтаксиса HTML-тегов, динамически указывает, какой компонент/нативный тег отображать

<tag is="component-name">
<component :is="variable">

<ul><li is="my-component"></li></ul>
key Предоставляет уникальный идентификатор виртуальному DOM Vue, повышает эффективность рендеринга списков и обеспечивает правильное состояние компонента <tag key="unique-value">
<tag :key="item.id">
<div v-for="item in list" :key="item.id">{{item}}</div>
ref Получает DOM-элемент или экземпляр компонента, используется для прямого управления нативным DOM / вызова методов дочернего компонента Шаблон: ref="name"
Скрипт: this.$refs.name
<input ref="inputRef">
this.$refs.inputRef.focus()

is 属性

В Vue.js атрибут is обычно используется для реализации динамических компонентов, особенно полезен, когда нужно динамически переключаться между разными компонентами во время выполнения.

  • Тип: String или Object
  • Назначение: isАтрибут используется для динамического указания текущего<component>компонента, который должен отрендерить какой дочерний компонент. Обычно используется вместе с<component>элементом `component` и возможностями динамических компонентов, позволяющими переключать разные компоненты во время выполнения на основе данных.

Пример

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">Переключить компонент</button>
  </div>
</template>

<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';

export default {
  data() {
    return {
      currentComponent: 'FirstComponent'
    };
  },
  components: {
    FirstComponent,
    SecondComponent
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'FirstComponent' ? 'SecondComponent' : 'FirstComponent';
    }
  }
};
</script>

В приведённом выше коде,currentComponentявляется свойством данных, которое определяет<component>какой конкретный компонент должен отрисовывать элемент. При нажатии кнопки вызовtoggleComponentметод переключитcurrentComponentзначение, тем самым динамически изменяя отображаемый компонент.

Примечание:

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

key 属性

  • Тип: String или Number

  • НазначениеВ рендеринге списков Vue.js каждыйv-forэлемент в цикле должен иметь уникальныйkeyатрибута.keyРоль `key` заключается в том, чтобы помочь Vue определять уникальность каждого узла, тем самым эффективно обновляя виртуальный DOM. Когда Vue повторно рендерит список, он, основываясь наkeyрешить, повторно использовать существующие DOM-элементы или создавать их заново.

    Пример

    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    В приведённом выше коде,item.idaskeyатрибут, гарантируя, что каждый элемент списка может быть правильно идентифицирован и обработан Vue при обновлении данных.

  • Примечания:

    • keyОн должен быть уникальным и стабильным. Стабильный означает,keyон не должен изменяться при изменении данных; в противном случае это повлияет на производительность Vue и стратегию повторного использования виртуального DOM.
    • Избегайте использования index в качествеkeyесли вы явно не знаете, что порядок элементов списка не изменится.

ref 属性

  • Тип: String или Object

  • Назначение: refОн используется для регистрации ссылочной информации для элементов или дочерних компонентов. В реальной разработке вы можете использоватьrefдля доступа к конкретным DOM-элементам или экземплярам дочерних компонентов, тем самым выполняя такие операции, как вызов методов, доступ к свойствам и т.д.

Добавление ref к DOM-элементу

Пример

<template>
  <div>
    <input type="text" ref="inputField">
  </div>
</template>

<script>
export default {
  mounted() {
console.log(this.$refs.inputField); // доступ к DOM-элементу
this.$refs.inputField.focus(); // вызов метода DOM-элемента
  }
}
</script>

Добавление ref к дочернему компоненту

Пример

<template>
  <div>
    <child-component ref="childRef"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  mounted() {
console.log(this.$refs.childRef); // доступ к экземпляру дочернего компонента
this.$refs.childRef.doSomething(); // вызов метода дочернего компонента
  }
}
</script>

Примечания:

  • При использовании в шаблоне,refVue предоставит соответствующий$refsобъект, через который можно получить доступ к зарегистрированному DOM-элементу или экземпляру дочернего компонента.
  • Избегайте чрезмерного использования `ref`ref, и по возможности работайте с DOM и дочерними компонентами через подходы, управляемые данными, и обработку событий, чтобы код оставался поддерживаемым и понятным.
Другие расширения