vue动态选择组件

Posted wangbob

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue动态选择组件相关的知识,希望对你有一定的参考价值。

有时候会用到同一位置因为条件不同而使用不同组件,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>

以上是关于vue动态选择组件的主要内容,如果未能解决你的问题,请参考以下文章

vue动态选择组件

vue中的组件

element Cascader 级联选择器动态加载实例

34 动态组件(切换组件)保存状态input值

vscode代码片段生成vue模板

15《Vue 入门教程》Vue 动态组件 &amp;amp; keep-alive