is 属性

多个组件使用同一个挂载点，点击按钮组件可以动态切换

示例1：

<template>
  <button @click="change">切换</button>
  <component :is="page"></component>
</template>

<script setup>
import { ref, shallowRef } from 'vue'
import Apage from "./views/Apage.vue"
import Bpage from "./views/Bpage.vue"

let page = shallowRef(Apage)

const change = () => {
  if (page.value == Apage) {
    page.value = Bpage
  }
  else {
    page.value = Apage
  }
}
</script>

示例2：

<template>
  <button @click="page = !page">切换</button>
  <component :is="page ? Apage : Bpage"></component>
</template>
<script setup>
import { ref } from 'vue'
import Apage from "./views/Apage.vue"
import Bpage from "./views/Bpage.vue"

let page = ref(true)
</script>