is 属性 动态切换
<h3>多个组件使用同一个挂载点，点击按钮组件可以动态切换</h3>
<pre><code class="language-javascript">示例1：
&lt;template&gt;
&lt;button @click=&quot;change&quot;&gt;切换&lt;/button&gt;
&lt;component :is=&quot;page&quot;&gt;&lt;/component&gt;
&lt;/template&gt;
&lt;script setup&gt;
import { ref, shallowRef } from 'vue'
import Apage from &quot;./views/Apage.vue&quot;
import Bpage from &quot;./views/Bpage.vue&quot;
let page = shallowRef(Apage)
const change = () =&gt; {
if (page.value == Apage) {
page.value = Bpage
}
else {
page.value = Apage
}
}
&lt;/script&gt;</code></pre>
<pre><code class="language-javascript">示例2：
&lt;template&gt;
&lt;button @click=&quot;page = !page&quot;&gt;切换&lt;/button&gt;
&lt;component :is=&quot;page ? Apage : Bpage&quot;&gt;&lt;/component&gt;
&lt;/template&gt;
&lt;script setup&gt;
import { ref } from 'vue'
import Apage from &quot;./views/Apage.vue&quot;
import Bpage from &quot;./views/Bpage.vue&quot;
let page = ref(true)
&lt;/script&gt;</code></pre>