回首Vue3之组件篇（一）

这是我参与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。