is attribute 来切换不同的组件

  <div id="demo">
    <component v-bind:is="currentComponent">taozi</component>
    <button @click="click">切换</button>
  </div>
  
  <script src="vue.js" type="text/javascript" charset="utf-8"></script>
  <script>
    Vue.component('slot-welcome',{
      template:`<div>
        <p>welcome</p>
        <slot></slot>
      </div>`
    })
    Vue.component('slot-hello',{
      template:`<div>
        <p>hello</p>
        <slot></slot>
      </div>`
    })
   var vm = new Vue({
      el:"#demo",
      data:{
        currentComponent:'slot-hello'
      },
      methods:{
        click(){
          if(this.currentComponent === "slot-welcome"){
            this.currentComponent = "slot-hello"
          }else {
            this.currentComponent = "slot-welcome"
          }
        }
      }
    })
    //参考： https://kaven.blog.csdn.net/article/details/109621293
  </script>