Vue · all subjects

dynamic components

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

<component> is a meta component for dynamic rendering

The <component> element is a meta component for rendering dynamic components or elements. The actual component to render is determined by the `is` prop. It is a built-in special element, not a true component, and is compiled away during template compilation.

<component> element props interface

The <component> element has the following interface: interface DynamicComponentProps { is: string | Component } The `is` prop is required and determines which component or element to render.

<component> is prop accepts string or component definition

When `is` is a string, it can be either an HTML tag name or a component's registered name. Alternatively, `is` can be directly bound to the definition of a component object.

v-model on <component> with dynamic native elements won't work

If `v-model` is used on a `<component>` tag with a dynamically created native HTML element (like 'input' or 'select'), it won't work. The template compiler expands `v-model` to a `modelValue` prop and `update:modelValue` event listener, but native HTML elements don't support these. To work around this, split the `v-model` into an attribute and event manually.

Built-in components must be registered to pass by name to <component>

Built-in components like `Transition` and `TransitionGroup` can all be passed to the `is` prop, but you must register them in the components option if you want to pass them by name. Registration is not required if you pass the component definition itself to `is` rather than its name, such as in `<script setup>`.

<component> example with Options API

```vue <script> import Foo from './Foo.vue' import Bar from './Bar.vue' export default { components: { Foo, Bar }, data() { return { view: 'Foo' } } } </script> <template> <component :is="view" /> </template> ``` This example shows rendering components by registered name using Options API.

<component> example with Composition API and script setup

```vue <script setup> import Foo from './Foo.vue' import Bar from './Bar.vue' </script> <template> <component :is="Math.random() > 0.5 ? Foo : Bar" /> </template> ``` This example shows rendering components by definition using Composition API with `<script setup>`.

<component> example rendering HTML elements

```vue-html <component :is="href ? 'a' : 'span'"></component> ``` This example shows using <component> to dynamically render HTML elements based on a condition.

is attribute purpose

The is attribute is used for binding dynamic components.

is attribute type and values

The is attribute expects a value of type string or Component.

is attribute on native elements support

The is attribute on native HTML elements is only supported in Vue 3.1+.

is attribute on native elements behavior

When the is attribute is used on a native HTML element, it will be interpreted as a Customized built-in element, which is a native web platform feature.

is attribute with vue: prefix

You can prefix the value of the is attribute with 'vue:' so that Vue will render the element as a Vue component instead of as a native element. This is useful when you need Vue to replace a native element with a Vue component. Example: ```vue-html <table> <tr is="vue:my-row-component"></tr> </table> ```

Give your agent this brain