写在前面👏
在开发中，你是否还在用v-if来控制tab切换时展示哪个组件/页面吗？其实使用vue的内置组件component用法代码简化好多。一起来看看吧~👀
先来看一个简单的案例🤡
实现效果：点击切换组件
点击A组件展示A组件的内容
单击B组件展示B组件内容
源码
父组件
<template>
<div>
<h1>点击切换组件</h1>
<div>
<span @click="changeView('1')">组件A</span>
<span @click="changeView('2')">组件B</span>
</div>
<component :is="flag === '1' ? Home:About"></component>
</div>
</template>
<script setup>
import {ref} from 'vue'
import Home from './views/Home.vue'
import About from './views/About.vue'
let flag = ref('1')
const changeView = (val) => {
if(val === '1'){
flag.value = '1'
} else {
flag.value = '2'
}
}
</script>
<style scoped>
span{
margin: 10px;
}
</style>
A组件
<template>
<div>
<h1>我是组件A</h1>
</div>
</template>
<style scoped>
h1{
color: red;
margin-top: 30px;
}
</style>
B组件
<template>
<div>
<h1>我是组件B</h1>
</div>
</template>
重点✨
component标签：它的用途是可以动态绑定我们的组件,根据数据不同更换不同的组件.
有一个is属性，is的作用就是显示指定的组件
官方说明： 渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染
