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

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

Показанное выше стало возможным с помощью элемента Vue <component> со специальным атрибутом is:

<!-- Компонент меняется при изменении currentTabComponent -->
<component v-bind:is="currentTabComponent"></component>

В примере выше currentTabComponent может содержать:

• имя зарегистрированного компонента, или

• объект с настройками компонента

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

Обратите внимание, атрибут может использоваться и с обычными HTML-элементами, однако они будут рассматриваться как компоненты, а это значит, что все атрибуты будут привязываться как DOM-атрибуты. Для того чтобы некоторые свойства, такие как value работали так, как вы ожидаете, следует привязывать их с использованием модификатора .prop.