这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

这篇文章我们来讲一下内置组件component的使用方法，以及在使用它的时候我们需要注意的地方。在回首Vue3之指令篇（九）中我们稍微的提了一下，下面让我们在详细的看一下吧。

如何使用

渲染一个“元组件”为动态组件。依is的值，来决定哪个组件被渲染。is 的值是一个字符串，它既可以是 HTML 标签名称也可以是组件名称。值得我们注意的是：如果是组件我们要保证它们是已被注册过。

使用变量引用组件

假定一个变量为currentComponent，此变量可以是组件名称，也可以是组件本身。

使用方法如下：

<component :is="currentComponent"></component>

组件名称

假定已被注册的组件为my-component, currentComponent="my-component" ,此时动态组件渲染的是组件my-component。

组件本身

我们定义一个变量，这个变量是个组件，如下：

setup() {
    const todoList = ref({
        template: `
        <ul>
            <li v-for="(item, index) in 9">
                {{item}}
            </li>
        </ul>`
    })
    return {
        todoList
    }
}

我们让 currentComponent="todoList"，此时是渲染得是组件本身，不需要注册。

使用$options引用组件

使用$options，可以渲染注册过的组件或 prop 传入的组件，如下：

<component :is="$options.components.child"></component>

其中child是个变量，你想渲染哪个组件，就把child改成哪个组件的名称。

使用字符串引用组件

假定已被注册的组件为my-component，我们可以使用字符串直接引用组件，如下：

<component :is="'my-component'"></component>

渲染原生 HTML 元素

我们可以使用内置组件component渲染原生 HTML 元素，如下：

<component :is="'h1'"></component>

三元运算

在使用内置组件component时，is的值可以是三元运算的结果，如下：

<component :is=" isNativeHTML ? 'h1' : 'my-component' "></component>

其中isNativeHTML，表示是否是原生 HTML 元素，为布尔值。

总结

is 的值是一个字符串。
通常在做登录与注册切换，文章阅读切换等功能是会用到动态组件，总而言之，根据自己的需求，合理的使用component。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之组件篇（一）