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动态选择组件的主要内容,如果未能解决你的问题,请参考以下文章