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

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

业务场景

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

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

解决方案

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

文本组件配置：

<template>
<div>
我是单行文本框{{config.type}}
</div>
</template>
<script>
export default {
name:"rx-textbox-config",
props:{
config:Object
}
}
</script>
<style>
</style>

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

多行文本框配置：

<template>
<div>
我是多行文本框{{config.name}}
</div>
</template>
<script>
export default {
name:"rx-textarea-config",
props:{
config:Object
}
}
</script>
<style>
</style>

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

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

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

使用动态组件：

<component :is="currentConfig" :config="config"></component>

使用代码切换组件

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

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

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

您可能感兴趣的文章:

• Vue.js动态组件解析
• Vue 自定义动态组件实例详解
• vue中用动态组件实现选项卡切换效果
• vue动态组件实现选项卡切换效果
• Vue.js的动态组件模板的实现
• 详解Vue 动态组件与全局事件绑定总结
• Vue动态组件实例解析
• Vue动态组件与异步组件实例详解
• Vue动态组件和异步组件原理详解
• vue组件定义，全局、局部组件，配合模板及动态组件功能示例
• Vue 动态组件components和v-once指令的实现