内置组件+is实现动态组件

官网定义：

实例：

动态点击以后：

代码解析：

点击事件触发以后动态的将某个组件赋值给showComponent，is动态绑定的那里便会发生变化

代码：

<template>
  <div>
    <button @click="change('1')" style="background-color: greenyellow">组件1</button>
    <button @click="change('2')" style="background-color: gold">组件2</button>
    <button @click="change('3')" style="background-color: lightseagreen">组件3</button>
    <component :is="showComponent"></component>
  </div>
</template>

<script>
  const showComponent1 = { template:'<div>component1内容</div>'}
  const showComponent2 = { template:'<div>component2内容</div>'}
  const showComponent3 = { template:'<div>component3内容</div>'}
    export default {
        name: "component-live",
        data(){
          return{
            showComponent:''
          }
        },
        methods:{
          change(val){
            this.showComponent = "showComponent"+val;
          }
        },
        components:{
          showComponent1,
          showComponent2,
          showComponent3
        }
    }
</script>

<style scoped>

</style>