vue组件改变标签属性is的值来动态切换组件内容-蒲公英云

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

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

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

写两个表单组件

hive详情表单组件

<template>
<div class="hive_control">
    <!-- Oracle弹窗内容 -->
    <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">
    <!-- MySQL弹窗内容 -->
    <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)
      },
 }
}