037.Vue3入门，动态组件

1、App.vue代码如下：

<template>
  <component :is="tabComponent"></component>
  <button @click="change">切换组件</button>
</template>

<script>
import Child1 from "./view/Child1.vue"
import Child2 from "./view/Child2.vue"

export default {
  data() {
    return {
      tabComponent: "Child1"
    }
  },
  components: {
    Child1,
    Child2
  },
  methods: {
    change() {
      console.log('change', this.tabComponent == "Child1")
      this.tabComponent = this.tabComponent == "Child1" ? "Child2" : "Child1";
    }
  }
}
</script>

2、Child1.vue代码如下;

<template>
  <div>我是子页面1</div>
</template>

<script>
export default {
  beforeCreate() { console.log('beforeCreate') },
  created() { console.log('created') },
  beforeMount() { console.log('beforeMount') },
  beforeUpdate() { console.log('beforeUpdate') },
  beforeDestroy() { console.log('beforeDestroy') },
  mounted() { console.log('mounted') },
  updated() { console.log('updated') },
  destroyed() { console.log('destroyed') },
  methods: { change() { console.log('change') }
  }
}
</script>

3、Child.vue代码如下:

<template>
  <div>我是子页面2</div>
</template>

<script>
export default {
  beforeCreate() { console.log('beforeCreate') },
  created() { console.log('created') },
  beforeMount() { console.log('beforeMount') },
  beforeUpdate() { console.log('beforeUpdate') },
  beforeDestroy() { console.log('beforeDestroy') },
  mounted() { console.log('mounted') },
  updated() { console.log('updated') },
  destroyed() { console.log('destroyed') },
  methods: { change() { console.log('change') }
  }
}
</script>

4、效果如下：