16:vue3 动态组件
A组件
1 <template> 2 <h3>ComponentA</h3> 3 </template>
B组件
1 <template> 2 <h3>ComponentB</h3> 3 </template>
App.vue
1 <template> 2 <h3>动态组件(A、B两个组件动态切换)</h3> 3 <component :is="tabComponent"></component> 4 <button @click="changeHandle">切换组件</button> 5 </template> 6 7 <script> 8 import ComponentA from "./components/ComponentA.vue" 9 import ComponentB from "./components/ComponentB.vue" 10 11 export default{ 12 data(){ 13 return{ 14 tabComponent:"ComponentA" 15 } 16 }, 17 methods:{ 18 changeHandle(){ 19 this.tabComponent=this.tabComponent=="ComponentA"?"ComponentB":"ComponentA" 20 } 21 }, 22 components:{ 23 ComponentA, 24 ComponentB 25 } 26 27 } 28 </script>