這是我參與8月更文挑戰的第10天，活動詳情查看：8月更文挑戰html

這篇文章咱們來說一下內置組件component的使用方法，以及在使用它的時候咱們須要注意的地方。在回首Vue3之指令篇（九）中咱們稍微的提了一下，下面讓咱們在詳細的看一下吧。markdown

如何使用

渲染一個「元組件」爲動態組件。依is的值，來決定哪一個組件被渲染。is 的值是一個字符串，它既能夠是 HTML 標籤名稱也能夠是組件名稱。值得咱們注意的是：若是是組件咱們要保證它們是已被註冊過。app

使用變量引用組件

假定一個變量爲currentComponent，此變量能夠是組件名稱，也能夠是組件自己。post

使用方法以下：ui

<component :is="currentComponent"></component>
複製代碼

組件名稱url

假定已被註冊的組件爲my-component, currentComponent="my-component" ,此時動態組件渲染的是組件my-component。spa

組件自己3d

咱們定義一個變量，這個變量是個組件，以下：code

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

咱們讓 currentComponent="todoList"，此時是渲染得是組件自己，不須要註冊。component

使用$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。