动态组件 —— 2种方式实现动态组件的切换,VUE 动态组件的应用案例分析

动态组件适用于在不同组件之间进行动态切换。我使用过2种方法来实现：

（1）可以通过 Vue 的  元素加一个特殊的 is 特性来实现；

（2）通过v-if来进行条件渲染，同样能实现。

下面是2种实现方法的代码：

  1 
  2 
  3 
  4     
  5     
  6     
  7     
  8     
 36 
 37 
 38     

 39         
方法1：使用v-if来实现组件之间动态切换
 40         
 45             {{ tab }}
 46         
 47         
 48         
 49         
 50 
 51         
方法二：使用<component  is="currentTabComponent"></component>'来实现真正的动态组件切换
 52         
 57             {{ tab }}
 58         
 59         
 60     
 61     
 62     
103 
104 

结论：显然的是，使用Vue保留的元素更加方便高效。

 

值得注意的是：在这里注册的组件都是全局注册的，在中，currentTabComponent表示已全局注册的组件名称。但是currentTabComponent可以支持2种情况：

（1）即上述所说的已注册的组件名称

（2）一个组件的选项对象

 

第（2）种情况的使用，如下所示：

 

 1 
 2 
 3 
 4     
 5     
 6     
 7     
 8     
38 
39 
40     

41         
46             {{tab.name}}
47         
48         
49           
50     
51     
52     
87 
88 

VUE 动态组件的应用案例分析

本文实例讲述了VUE 动态组件的应用。分享给大家供大家参考，具体如下：

业务场景

我们在开发表单的过程中会遇到这样的问题，我们选择一个控件进行配置，控件有很多中类型，比如文本框，下来框等，这些配置都不同，因此需要不同的配置组件来实现。

较常规的方法是使用v-if 来实现，这样界面看上去比较复杂，而且需要进行修改主页面。

解决方案

可以使用动态组件来实现，为了体现动态组件的特性，我们简化实现方式，编写两个简单的组件来测试一下这个功能。

文本组件配置：

这个组件我统一配置一个config 的对象属性，配置一个type 属性。

多行文本框配置：

这里我配置一个 name的属性。

在调用界面做写如下代码，导入组件

export default {
 name: 'App',
 components: {
  rxTextboxConfig,
  rxTextareaConfig,
 }

使用动态组件：

使用代码切换组件

this.currentConfig=ctlType +"-config";
if(ctlType=="rx-textbox"){
 this.config.type="VARCHAR";
}
if(ctlType=="rx-textarea"){
 this.config.name="我是富文本框";
}

这里写if 只是为了体现这个特性，实际实现不用这种方式。

希望本文所述对大家vue.js程序设计有所帮助。

若文章对您有帮助，帮忙点个赞！

0赞

1踩

 发布时间 2019-12-02 15:02:03

内容投诉[email protected]