vue组件改变标签属性is的值来动态切换组件内容

灰太狼 2023-01-05 14:28 151阅读 0赞

**首先描述一下我们经常在项目中遇到的需求：**  
比如我们要写一个弹窗，弹窗里显示的是表单内容，但是表单内容会根据进入前选择的状态不通显示的表单内容不通，也就是说，这个弹窗里面有多个个不同的表单在各自状态下子在弹窗中渲染，这个时候我们就需要封装一个组件，但是组件不能是死的，我们要通过is名称来动态的切换组件显示；

#### 写两个表单组件 ####

hive详情表单组件

<template>
    <div class="hive_control">
        
        <el-form :model="form" label-width="100px" :disabled="true">
            <el-form-item label="资源名称" prop="zyType">
                <el-input v-model="form.resourceName"></el-input>
            </el-form-item>
            <el-form-item label="所属项目" prop="zyType">
                <el-input v-model="form.projectName"></el-input>
            </el-form-item>
            <el-form-item label="数据库名" prop="zyType">
                <el-input v-model="form.dbName"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="zyType">
                <el-input v-model="form.userName"></el-input>
            </el-form-item>
        </el-form>
    </div>
    </template>
    
    <script>
    
    export default { 
        data() { 
            return { 
                form: { }
            }
        },
        props: ['value'],
        methods: { 
            formData() { 
                this.form = this.value;
            }
        }
    }
    </script>

MySQL详情表单组件

<template>
    <div class="mySQL_control">
        
        <el-form :model="form" label-width="100px" :disabled="true">
            <el-form-item label="资源名称" prop="zyType">
                <el-input v-model="form.resourceName"></el-input>
            </el-form-item>
            <el-form-item label="所属项目" prop="zyType">
                <el-input v-model="form.projectName"></el-input>
            </el-form-item>
            <el-form-item label="数据库类型" prop="zyType">
                <el-input v-model="form.resourceType"></el-input>
            </el-form-item>
            <el-form-item label="IP" prop="zyType">
                <el-input v-model="form.host"></el-input>
            </el-form-item>
        </el-form>
    </div>
    </template>
    
    <script>
    
    export default { 
        data() { 
            return { 
                form: { }
            }
        },
        props: ['value'],
        methods: { 
            formData() { 
                this.form = this.value;
            }
        }
    }
    </script>

#### 先在项目中写一个弹窗组件 ####

<template>
      <el-dialog title="弹窗名称" :visible.sync="dialogVisible" width="540px">
          <component :is="componentType" :value='formValue' ref="sourceChild"></component>
      </el-dialog>
    </template>
    
    import MySQL from './MySQL.vue'
    import hive from './hive.vue'
    
    export default { 
     data(){ 
      dialogVisible:false,
      formValue:{  //这里把渲染数据写死，项目中肯定是从后端接口获取不同的数据
        resourceName:'hive',
        projectName:'项目1',
        resourceType:'MySQL ',
        dbName:'MySQL ',
        userName:'你好',
        host:'172.89.32.2'
      },
      componentType:'MySQL'
     },
     components: { 
        MySQL,
        hive,
     },
     methods:{ 
        showConponent() { 
            //根据路由跳转带过来的type去决定componentType的值来渲染哪个表单内容
            let type = this.$route.query.type;
             if (type === 'MySQL') { 
                 this.componentType= 'MySQL'
             } else { 
                 this.componentType= 'hive'
             }
         },
         openDialog() {  //打开弹窗，触发子组件内方法渲染数据 
            this.dialogVisible= true;
             setTimeout(() => { 
                 this.$refs.sourceChild.formData()
             }, 300)
              
          },
     }
     
    }

这里只写了两个简单的表格，如果还有多个不同表单内容，只需要写好表单组件，引入注册，在showConponent方法做好判断就可以！