动态组件怎么添加组件
时间: 2023-09-19 14:11:16 浏览: 37
动态添加组件可以通过以下方法实现。首先,在弹窗显示的时候,可以使用`scope.row`来获取当前记录的信息。根据信息中的对应关键字段(比如`programe_id`),可以拼接出组件的唯一文件名。然后,使用`require`方法动态导入组件。接着,通过`Vue.component`方法将导入的组件注册到Vue实例中,以便在渲染时使用。
具体代码如下所示:
```javascript
// 核心代码
methods: {
add(msg) {
let programe_id = msg.programe_id;
let componentFileName = 'app' + programe_id + 'temp.vue';
// 使用require动态导入组件
let component = require('@/components/apps/' + componentFileName).default;
// 注册组件
Vue.component(component.name, component);
}
},
render: function (createElement) {
return createElement('appTable');
}
```
通过以上方法,动态添加组件的过程中,可以根据不同的`programe_id`来导入不同的组件,实现动态组件的添加。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue动态添加组件](https://blog.csdn.net/m0_37894494/article/details/120539267)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [Docker学习文档,全面介绍Docker技术](https://download.csdn.net/download/Goligory/88280848)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]