内置组件

component
transition
keep-alive
slot

不同组件之间进行动态的切换

//两个子组件
var son1 = {
    template: `
      <div>
        <h1>子组件-1</h1>
        <slot>子组件-1的默认内容</slot>
      </div>
            `
}
var son2 = {
     template: `
       <div>
         <h1>子组件-2</h1>
         <slot>子组件-2的默认内容</slot>
       </div>
            `
}

<!-- 父组件 -->
<div id="app">
  <button @click="change1">son1</button>
  <button @click="change2">son2</button>
  <component :is='state'></component>
</div>
 
<script>
 var vm = new Vue({
    el: "#app",
    data() {
        return {
            state: 'son1'
        }
    },
    methods: {
        change1() {
            this.state = 'son1'
        },
        change2() {
            this.state = 'son2'
        }
    },
    components: {
        son1,
        son2
    }
 })
</script>