网站建设文章缩略图,网站淘宝客怎么做,企业网站建设应避免数据孤岛,wordpress手机编辑器前言#xff1a;
最近在研究gitHub中的一个项目并将与自己之前完成的项目进行结合#xff0c;其中有一个功能就是需要使用根据不同的字段#xff0c;渲染不同的组件#xff0c;查阅资料发现可以使用component完成这个功能#xff0c;在实现的过程中也会遇见一些坑#x…前言
最近在研究gitHub中的一个项目并将与自己之前完成的项目进行结合其中有一个功能就是需要使用根据不同的字段渲染不同的组件查阅资料发现可以使用component完成这个功能在实现的过程中也会遇见一些坑总结如下与君共勉。
官网
组件基础 | Vue.js 有些场景会需要在两个组件间来回切换比如 Tab 界面需要通过 Vue 的 component 元素和特殊的 is attributel来实现
component :istabs[currentTab]/component
在上面的例子中被传给 :is 的值可以是以下几种
被注册的组件名导入的组件对象
在两个组件之间进行切换
注意is如果使用字符串会加载不出来传递给is的值应该为组件名 templateChild1 /Child2 /component :isflag ? StringField : NumberField/componentel-button clickflag !flag切换组件/el-button
/template
script setupimport { ref } from vueimport StringField from ./Child1.vueimport NumberField from ./Child2.vueconst flag ref(true)/script
如果在多个组件之间进行选择
注意在选取type的时候需要使用computed
templatecomponent classschema-item :isgetComponentFlag :schemaprops.schema/component
/templatescript langts setup
import { defineProps, computed,ref} from vue
import StringField from ../../../lib/fields/StringField.vue
import NumberField from ../../../lib/fields/NumberField.vue
import ArrayField from ../../../lib/fields/ArrayField.vue
import ObjectField from ../../../lib/fields/ObjectField.vue
const type ref(string)
// 根据 type 动态设置组件 需要使用计算属性
const getComponentFlag computed(() {switch (type.value) {case string:return StringFieldcase number:return NumberFieldcase array:return ArrayFieldcase object:return ObjectFieldcase integer:return NumberFielddefault:console.warn(${type.value} is not supported)}
})
/script
