参考文档 is 属性和内置组件 component
代码实例:
在父组件中 我现在在 app.vue中
//首先准备你的切换的组件
<template>
<div id="app">
<!-- vue.js提供了一个特殊元素 component 用来动态挂载组件 使用is特性来选择挂载的组件-->
<component :is="current"></component>
<button @click="cur('A')">切换到A</button>
<button @click="cur('B')">切换到B</button>
<button @click="cur('C')">切换到C</button>
</div>
</template>
<script>
import three from './components/three'
import A from './components/A'
import B from './components/B'
import C from './components/C'
export default {
components:{
three,A,B,C
},
data(){
return{
current:'A'
}
},
methods:{
cur(s){
console.log(s)
this.current = s
}
}
}
</script>
A.vue B.vue C.vue 自己根据需求改
,这里只贴一个模板
<template>
<div>
A组件
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>