vue动态选择组件

Posted 2021-03-17 wangbob

有时候会用到同一位置因为条件不同而使用不同组件，vue中可以用 :is

 1 <template>
 2   <div class="RuleContent">
 3     <el-container>
 4       <el-header>{{benginLable}}</el-header>
 5       <el-main>
 6         <component :is="ruleMsg" :id="treeid" :parentid="parentid" :benginLable="benginLable" @save_tree_item_msg="saveTreeItemMsg"></component>
 7       </el-main>
 8     </el-container>
 9   </div>
10 </template>
11 
12 <script lang="ts">
13 import { Component, Prop, Vue, Emit, Model, Watch } from ‘vue-property-decorator‘
14 import axios from ‘axios‘
15 import RuleName from ‘@/components/RuleName.vue‘
16 import Rule from ‘@/components/Rule.vue‘
17 import RuleDet from ‘@/components/RuleDet.vue‘
18 import baseUrl from ‘@/api/baseUrl.ts‘
19 @Component({
20   components: {
21     RuleName,
22     Rule,
23     RuleDet
24   }
25 })
26 export default class RuleContent extends Vue {
27   ruleMsg= ‘‘
28   @Prop() type!: number
29   @Prop() treeid!: number
30   @Prop() parentid!: number
31   @Prop() benginLable!: string
32 
33   tableData: String[] = []
34   @Watch(‘type‘)
35   typeChange (newValue: number, oldValue: number) {
36     if (oldValue !== newValue) {
37       switch (newValue) {
38         case 1:
39           this.ruleMsg = ‘RuleName‘
40           break
41         case 2:
42           this.ruleMsg = ‘RuleDet‘
43           break
44         case 3:
45           this.ruleMsg = ‘Rule‘
46           break
47         default:
48           break
49       }
50     }
51   }
52   saveTreeItemMsg (data:string, id:number) {
53     this.$emit(‘save_tree_item‘, data, id)
54   }
55 
56 }
57 </script>