文章摘要
这篇文章介绍了组件渲染逻辑的实现方法，重点描述了如何使用数据绑定技术实现组件的动态渲染。文章通过一个示例展示了如何在一个组件模板中实现以下功能：
1. 使用`v-for`循环遍历组件数据`cardArr`，动态渲染不同的组件；
2. 通过组件ID`componentId`实现组件间的双向绑定；
3. 实现组件切换功能，通过背景颜色的变化突出当前渲染的组件；
4. 使用样式代码实现组件切换条和组件视图的显示效果。
文章还详细说明了组件的数据结构和绑定关系，以及如何通过JavaScript实现组件之间的动态交互。
<template>
<div id=”app”>
<div class=”top”>
<div
class=”crad”
:class=”{ highLight: whichIndex==index }”
v-for=”(item, index) in cardArr”
:key=”index”
@click=”
whichIndex=index;
componentId=item.componentId;
”
>
{{ item.componentName }}
</div>
</div>
<div class=”bottom”>
<keep-alive>
<component :is=”componentId”></component>
</keep-alive>
</div>
</div>
</template>
<script>
import one from “https://www.jb51.net/article/components/one”;
import two from “https://www.jb51.net/article/components/two”;
import three from “https://www.jb51.net/article/components/three”;
import four from “https://www.jb51.net/article/components/four”;
export default {
components: {
one,
two,
three,
four,
},
data() {
return {
whichIndex: 0,
componentId: “one”,
cardArr: [
{
componentName: “动态组件一”,
componentId: “one”,
},
{
componentName: “动态组件二”,
componentId: “two”,
},
{
componentName: “动态组件三”,
componentId: “three”,
},
{
componentName: “动态组件四”,
componentId: “four”,
},
],
};
},
};
</script>
<style lang=”less” scoped>
#app {
width: 100%;
height: 100vh;
box-sizing: border-box;
padding: 50px;
.top {
width: 100%;
height: 80px;
display: flex;
justify-content: space-around;
.crad {
width: 20%;
height: 80px;
line-height: 80px;
text-align: center;
background-color: #fff;
border: 1px solid #e9e9e9;
}
.highLight {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
transform: translate3d(0, -1px, 0);
}
}
.bottom {
margin-top: 20px;
width: 100%;
height: calc(100% – 100px);
border: 3px solid pink;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>