vue动态切换组件component
index.vue
<template>
<div>
<button @click="change('test')">动态更改组件</button>
<component :is="item"></component>
<!--这个is绑定的是注册的组件名 -->
</div>
</template>
<script>
import test from "./test"
import jwq from './jwq'
export default {
name: "text",
data () {
return {
item:''
}
},
methods:{
change(e){
this.item=e
}
},
components: {
test,jwq
}
}
</script>
<style scoped>
</style>
jwq.vue
<template>
<div>jwq</div>
</template>
<script>
export default {
name: "text"
}
</script>
<style scoped>
</style>
test.vue
<template>
<div>zhn</div>
</template>
<script>
export default {
name: "test"
}
</script>
<style scoped>
</style>