Атрибут is в Vue3

Vue3 内置属性Встроенные атрибуты Vue3

isАтрибут is — ключевой атрибут в Vue для реализации динамических компонентов. Он используется для динамического указания, каким компонентом должен отрисовываться текущий элемент.

Базовое объяснение

isАтрибут is в основном используется в сценариях динамических компонентов, позволяя динамически переключать разные компоненты для отрисовки во время выполнения в зависимости от данных. Это основной способ реализации функциональности динамических компонентов в Vue.

  • Тип: String | Component
  • Назначение: Динамическое переключение компонентов для повторного использования компонентов и динамического рендеринга.

Базовое использование

1. Динамическое переключение компонентов

Использование<component>элемент вместе сisатрибут позволяет реализовать динамические компоненты:

Пример

<template>
  <div>
    <!-- currentComponent может быть строкой, например 'ComponentA', 'ComponentB' и т. д. -->
    <component :is="currentComponent"></component>

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

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

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

2. Использование объектов компонентов

Значением is также может быть непосредственно объект компонента:

Пример

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="switchToA">Показать A</button>
    <button @click="switchToB">Показать B</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  data() {
    return {
      currentComponent: ComponentA
    }
  },
  methods: {
    switchToA() {
      this.currentComponent = ComponentA
    },
    switchToB() {
      this.currentComponent = ComponentB
    }
  }
}
</script>

Сценарии использования

1. Переключение вкладок

Достигается эффект, аналогичный переключению вкладок:

Пример

<template>
  <div>
    <!-- Навигация по вкладкам -->
    <button
     v-for="tab in tabs"
     :key="tab.name"
     :class="{ active: currentTab === tab.name }"
     @click="currentTab = tab.name"
   >
      {{ tab.label }}
    </button>

    <!-- Динамический компонент -->
    <component :is="currentTabComponent" />
  </div>
</template>

<script>
import HomeTab from './tabs/HomeTab.vue'
import ProfileTab from './tabs/ProfileTab.vue'
import SettingsTab from './tabs/SettingsTab.vue'

export default {
  data() {
    return {
      currentTab: 'Home',
      tabs: [
{ name: 'Home', label: 'Главная', component: HomeTab },
{ name: 'Profile', label: 'Профиль', component: ProfileTab },
{ name: 'Settings', label: 'Настройки', component: SettingsTab }
      ]
    }
  },
  computed: {
    currentTabComponent() {
      const tab = this.tabs.find(t => t.name === this.currentTab)
      return tab ? tab.component : null
    }
  }
}
</script>

2. Условный рендеринг разных компонентов

Динамически выбирайте компонент для рендеринга на основе условий:

Пример

<template>
  <div>
    <select v-model="selectedType">
      <option value="warning">Предупреждение</option>
      <option value="error">Ошибка</option>
      <option value="success">Успех</option>
    </select>

    <component :is="alertComponent" :message="message" />
  </div>
</template>

<script>
import WarningAlert from './WarningAlert.vue'
import ErrorAlert from './ErrorAlert.vue'
import SuccessAlert from './SuccessAlert.vue'

export default {
  data() {
    return {
      selectedType: 'warning',
message: 'Это уведомление'
    }
  },
  computed: {
    alertComponent() {
      const componentMap = {
        warning: WarningAlert,
        error: ErrorAlert,
        success: SuccessAlert
      }
      return componentMap[this.selectedType]
    }
  }
}
</script>

Использование is на нативных элементах

В Vue 3.1+, когдаisатрибут is используется на нативных HTML-элементах, он интерпретируется как возможность пользовательских элементов (custom elements) нативной веб-платформы.

Но иногда нужно заменять нативные элементы на компоненты Vue в DOM-шаблонах. Например, в<table>используя пользовательские компоненты в качестве строк:

Пример

<table>
  <tbody>
    <tr is="vue:my-row-component"></tr>
  </tbody>
</table>

Использованиеvue:префикс позволяет Vue отображать элемент как компонент Vue вместо нативного HTML-элемента.

Примечания

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

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

Кэширование динамических компонентов с помощью keep-alive

Использование<keep-alive>Обёртывание динамических компонентов кэширует экземпляры компонентов, избегая повторного создания при каждом переключении:

Пример

<template>
  <div>
    <button @click="currentTab = 'home'">Главная</button>
    <button @click="currentTab = 'profile'">Профиль</button>

    <keep-alive>
      <component :is="currentTabComponent" />
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'home'
    }
  },
  computed: {
    currentTabComponent() {
      return this.currentTab + '-tab'
    }
  }
}
</script>

<keep-alive>Он кэширует экземпляры компонентов, которые были переключены. Когда компонент отображается снова, он восстанавливается непосредственно из кэша, а не создаётся заново.

Vue3 内置属性Встроенные атрибуты Vue3

Другие расширения