<template>
<div class="root">
<div @click="comName='one'">一</div>
<div @click="comName='two'">二</div>
<div @click="comName='three'">三</div>-->
<component :is="comName"></component>
</div>
</template>
<script>
import one from './one'
import two from './two'
import three from './three'
export default {
components:{
one,two,three
},
data() {
return {
comName:'one'
};
},
methods: {
},
};
</script>
<style lang="stylus" scoped>
.root {
margin: 20px 100px;
width 80%
height 60%
border 1px solid red
a {
margin-right 20px
line-height 50px
}
}
</style>
<!-- 组件会在 `件名` 改变时改变 -->
<component :is="组件名变量"></component>
<ul>
<li is='my-component'></li>
</ul>
网友评论