1. The following code is the introduced iview component, and a new Vue instance is created in the js section to achieve the effect of the dynamic component.
< template >
< div class= "layout" id= "dynamic-component" >
<Layout>
<Header>
<Menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo"></div>
<div class="layout-nav">
<MenuItem name="1">
<Icon type="ios-navigate"></Icon>
</MenuItem>
<MenuItem name="2" v-on:click="currentTab = "maininfo"">
<Icon type="ios-keypad"></Icon>
</MenuItem>
<MenuItem name="3" v-on:click="currentTab = "content"">
<Icon type="ios-analytics"></Icon>
</MenuItem>
<MenuItem name="4">
<Icon type="ios-paper"></Icon>
</MenuItem>
</div>
</Menu>
</Header>
<--!-->
<component :is="currentTabComponent"></component>
<Footer class="layout-footer-center">2018-2020 204 corporation</Footer>
</Layout> < / div >
< / template >
2. The Vue object created in the js section is as follows, but with the addition of this Vue object, the page appears blank. What"s going on?
Please give me some advice.
import ContentView from"@ / components/ContentView"
import MainInfoView from"@ / components/MainInfoView"
Vue.component ("tab-content", ContentView)
Vue.component ("tab-maininfo", MainInfoView)
export default {
}
new Vue ({
el:"- sharpdynamic-component",
data: {
currentTab: "maininfo",
},computed: {
currentTabComponent:function(){
return "tab-"+this.currentTab.toLowercase()
}
}
})