实现动态组件切换的效果
在vue项目中添加以下代码
App.vue页面
<template>
<div class="app-container">
<h1>App 根组件</h1>
<hr />
<button @click="comName = 'Left'">展示Left</button>
<button @click="comName = 'Right'">展示Right</button>
<hr />
<div class="box">
<!-- 渲染 Left 组件和 Right 组件 -->
<!-- component标签是vue内置的，作用：组件的占位符 -->
<component :is="comName"></component>
</div>
</div>
</template>
<script>
import Right from '@/components/Right.vue'
import Left from '@/components/Left.vue'
export default {
data() {
return {
// 要展示的组件的名字
comName:'Left'
}
},
components:{
Right,
Left
}
}
</script>
<style lang="less">
.app-container {
padding: 1px 20px 20px;
background-color: #efefef;
}
.box {
display: flex;
}
</style>
Left页面
<template>
<div class="left-container">
<h3>Left 组件</h3>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less">
.left-container {
padding: 0 20px 20px;
background-color: orange;
min-height: 250px;
flex: 1;
}
</style>
Right页面
<template>
<div class="right-container">
<h3>Right 组件</h3>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less">
.right-container {
padding: 0 20px 20px;
background-color: lightskyblue;
min-height: 250px;
flex: 1;
}
</style>
点击两个按钮可切换不同的组件的背景色
