vue的内置组件component 好东西_使用vue自带的component组件来注册组件有什么好处

介绍

vue的内置组件component，可以将一个“元组件”渲染为一个动态组件，根据is属性的值，来控制渲染为什么组件

用法

<!-- 动态组件由 vue实例的 `componentId` property 控制 -->
<component :is="componentId"></component>

<!-- 也能够渲染注册过的组件或 prop 传入的组件 -->
<component :is="$options.components.child"></component>
<component :is="demoComponent" ></component>

import demoComponent from './demoComponent '
1
2
3
4
5
6
7
8

使用场景

大部分需要使用for循环去渲染不同组件的场景都适用

例如 渲染工具栏组件

<component
  v-for="(widgetOption, index) in WidgetOptions"
   :key="index"
   :is="widgetOption.name"
   :options="widgetOption.options"
   class="public-toolWidget-class"
></component>
>
import * as DrawControl from "./DrawControl"
import * as QueryControl from "./QueryControl"
import * as LabelControl from "./LabelControl"
1
2
3
4
5
6
7
8
9
10
11

WidgetOptions数组

WidgetOptions = [{ name: "DrawControl", options: { default: 999 }},
 				 { name: "QueryControl", options: { default: 999 }},
				 { name: "LabelControl", options: { default: 999 }}]
1
2
3