read the Vue official website tutorial. In the dynamic components section, you see an example and want to implement it yourself, as shown in the following figure:
then I started working on the tab section:
<script src="//unpkg.com/vue">
</script>
<div id="dynamic-component-demo" class="demo">
<!-- <button class="dynamic-component-demo-tab-button">
Home
</button>
<button class="dynamic-component-demo-tab-button">
Posts
</button>
<button class="dynamic-component-demo-tab-button dynamic-component-demo-tab-button-active">
Archive
</button> -->
<tab-buttons :tabs="tabs" v-for="(tab,index) in tabs" :key="index">
</tab-buttons>
<div class="dynamic-component-demo-tab">
Archive component
</div>
</div>var tabButtons = {
template: `<button class="dynamic-component-demo-tab-button"></button>`,
props:{
tabs:{
type:Array
}
}
};
new Vue({
el:"-sharpdynamic-component-demo",
data:{
tabs:["Home","Posts","Archive"]
},
components:{
"tab-buttons":tabButtons
}
})-sharpdemo,
.demo,
.content .demo {
border: 1px solid -sharpeee;
border-radius: 2px;
padding: 25px 35px;
margin-top: 1em;
margin-bottom: 40px;
font-size: 1.2em;
line-height: 1.5em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow-x: auto;
}
-sharpdemo >:first-child,
.demo >:first-child,
.content .demo >:first-child {
margin-top: 0;
}
.dynamic-component-demo-tab-button:hover {
background: -sharpe0e0e0;
}
.dynamic-component-demo-tab-button {
padding: 6px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: 1px solid -sharpccc;
cursor: pointer;
background: -sharpf0f0f0;
margin-bottom: -1px;
margin-right: -1px;
}
.dynamic-component-demo-tab-button-active {
background: -sharpe0e0e0;
}
online debugging address: https://jsrun.net/zQhKp
The problem withis that I don"t know how to put values into the template of each individual subcomponent, looping and passing values are placed in tab-buttons. It seems that each tab-buttons receives a complete array value.