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>

posted on 2023-07-11 17:05 wuzx-blog 阅读(77) 评论(0) 编辑收藏举报