Vue ElementUI 组件封装：动态展示 Input、Select 或 Switch 并更新配置

可以使用Vue的动态组件和watch属性来实现根据用户选择动态变化config.js的内容。\n\n首先，在父组件中引入config.js，并定义一个变量来保存config.js的内容，例如：\njavascript\nimport config from './config.js';\n\nexport default {\n data() {\n return {\n configData: config,\n selectedValue: ''\n };\n },\n watch: {\n selectedValue(newValue) {\n // 根据用户选择的值动态更新config.js的内容\n this.configData = config.filter(item => item.value === newValue)[0];\n }\n }\n}\n\n\n然后，在父组件的模板中根据configData动态展示不同的组件，例如：\nhtml\n<template>\n <div>\n <component :is="configData.componentType" :data="configData.componentData"></component>\n <select v-model="selectedValue">\n <option v-for="item in configData" :value="item.value">{{ item.label }}</option>\n </select>\n </div>\n</template>\n\n\n在config.js中定义不同的组件类型和数据，例如：\njavascript\nconst config = [\n {\n value: 'input',\n label: 'Input',\n componentType: 'el-input',\n componentData: {}\n },\n {\n value: 'select',\n label: 'Select',\n componentType: 'el-select',\n componentData: {}\n },\n {\n value: 'switch',\n label: 'Switch',\n componentType: 'el-switch',\n componentData: {}\n }\n];\n\nexport default config;\n\n\n这样，当用户选择不同的select值时，会触发watch属性中的方法，动态更新configData的内容，从而实现动态展示不同的组件。