vue动态切换组件component

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>