1.不使用setup语法糖,这种方式和vue2差不多,is可以是个字符串
<template>
<Child1 />
<Child2 />
<component :is="currentComp"></component>
<el-button @click="compChange">切换组件</el-button>
</template>
<script>
import { ref } from 'vue'
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'
export default {
components: {
Child1,
Child2
},
setup() {
let currentComp = ref('Child1')
// 切换组件
const compChange = () => {
if(currentComp.value == 'Child1') {
currentComp.value = 'Child2'
}else {
currentComp.value = 'Child1'
}
}
return {
currentComp,
compChange
}
}
}
</script>
2. 使用setup语法糖,这时候的is如果使用字符串会加载不出来,得使用组件实例
第一种方式文章来源:https://www.toymoban.com/news/detail-573438.html
<template>
<Child1 />
<Child2 />
<component :is="flag ? Child1 : Child2"></component>
<el-button @click="flag = !flag">切换组件</el-button>
</template>
<script setup>
import { ref } from 'vue'
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'
const flag = ref(true)
</script>
第二种方式文章来源地址https://www.toymoban.com/news/detail-573438.html
<template>
<Child1 />
<Child2 />
<component :is="currentComp"></component>
<el-button @click="compChange">切换组件</el-button>
</template>
<script setup>
import { shallowRef, ref } from 'vue'
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'
//这里用ref的话,vue给出警告Vue接收到一个组件,该组件被制成反应对象。这可能会导致不必要的性能开销,应该通过将组件标记为“markRaw”或使用“shallowRef”而不是“ref”来避免。
// 如果使用 markRaw 那么currentComp将不永远不会再成为响应式对象。 所以得使用 shallowRef
let currentComp = shallowRef(Child1)
// 切换组件
const compChange = () => {
if(currentComp.value == Child1) {
currentComp.value = Child2
}else {
currentComp.value = Child1
}
}
</script>
到了这里,关于Vue3中使用component :is 加载组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!