常规情况下,在里动态加载不同组件的方式为:

<template>
<!-- 符合条件A,加载组件A -->
<BusinessComponentA v-if="condition==''A" />
<!-- 符合条件B,加载组件B -->
<BusinessComponentB v-if="condition=='B'" />
<!-- 符合条件C,加载组件C -->
<BusinessComponentC v-if="condition=='C'" />
</template>

这种方式的问题,就是如果有很多种业务场景,那么在template里就需要写很多的分支.

解决办法: 根据业务条件动态去匹配应该加载的业务组件,完整代码如下

  <template>
<div class="business-container">
<!-- component 标签已经代表当前这个是一个组件 -->
<!-- 只需要加载computed里计算出来的组件即可 -->
<component v-bind:is="currentBizComponent"></component>
</div>
</template> <script>
import BusinessComponentA from './components/BusinessComponentA'
import BusinessComponentB from './components/BusinessComponentB'
import BusinessComponentC from './components/BusinessComponentC' export default {
components: { BusinessComponentA, BusinessComponentB, BusinessComponentC },
data: function () {
return {
}
},
computed: {
// 业务类型
condition:function(){
// 当前页面数据 bizDoc
return this.$store.state.bizDoc.type // should return A || B || C
},
// 当前应该加载的组件
currentBizComponent: function () {
return 'BusinessComponent' + this.condition
}
}
}
</script>
<style lang="scss">
.business-container {
font-size: 20px;
padding: 50px;
height: 1000px;
background-color: #ffff;
text-align: center;
}
</style>

这样一来,以后再有新的业务类型增加,也仅仅需要引入和注册业务组件即可,加载的事情自动就完成了!

Vue 如何优雅的根据条件动态显示组件的更多相关文章

  1. Vue:渲染、指令、事件、组件、Props、Slots

    如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要的工具,而且没有妨碍我的工作”.每当学习 Vue 的时候,我都很高兴,因为很有意义,而且很优雅. 以上是我对 ...

  2. Vue:渲染、指令、事件、组件、Props

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要的工 ...

  3. Vue.js 学习笔记 第7章 组件详解

    本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...

  4. Vue.js优雅的实现列表清单的操作

        一.Vue.js简要说明 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当Vie ...

  5. Vue.js优雅的实现列表清单

        一.Vue.js简要说明 Vue.js (读音 /vjuː/) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时 ...

  6. Vue 全局注册逐渐 和 局部注册组件

    //定义一个名为 button-counter 的新组件 Script: Vue.component('button-counter',{//button-counter 这个是组件的名字 data: ...

  7. vue.js选择if(条件渲染)详解

    vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...

  8. 如何在Vue中优雅的使用防抖节流

    1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...

  9. vue 基础-->进阶 教程(2): 指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

随机推荐

  1. java 获取传入值的区间

    /** * 获取值的区间 * * @param num 值 */ public static Map<String, Integer> getNumSection(Integer num) ...

  2. Python基础点记录2

    ---- PygLatin 1 介绍函数的调用,就是直接函数名 def square(n): squared = n**2 print "%d squared is %d." % ...

  3. 015.Nginx重定向

    一 重定向概述 1.1 重定向介绍 重定向(Redirect)指通过各种方法将各种网络请求重新定个方向转到其它位置(如:网页重定向.域名的重定向.路由选择的变化也是对数据报文经由路径的一种重定向). ...

  4. 三面拿杭州研究院50offer:面对这些问题,你都能做到嘛??

    5G的到来证明了互联网行业发展一如既往的快,作为一名开发人员(Java岗)梦想自然是互联网行业的大厂,这次我的一个学员拿到了杭州的一个研究院offer,透露一下,年薪50多万,保底16,在这里分享一拨 ...

  5. 疯狂Python讲义PDF高清完整版免费下载|百度网盘

    百度网盘:疯狂Python讲义PDF高清完整版免费下载 提取码:uzba 内容简介 <疯狂Python讲义>既是一本适合初学者入门Python的图书(一个8岁的小朋友在未出版前已学习了本书 ...

  6. 在html页面中引入另一个html页面

    我们在使用html编写一个网站的时候,通常情况下头部和尾部是相同的,如果一个网站的每个页面都把这些代码写一遍,不仅浪费时间,还显得重复代码很多,所以此时把重复的页面单独摘出来,在用到的时候从外部直接引 ...

  7. PHP floatval()、doubleval () 函数

    floatval 函数用于获取变量的浮点值. floatval 不能用于数组或对象.高佣联盟 www.cgewang.com 版本要求:PHP 4 >= 4.2.0, PHP 5, PHP 7. ...

  8. PHP gd_info - 取得当前安装的 GD 库的信息

    gd_info — 取得当前安装的 GD 库的信息. 语法 array gd_info ( void )高佣联盟 www.cgewang.com 返回一个关联数组描述了安装的 GD 库的版本和性能. ...

  9. 5.15 牛客挑战赛40 C 小V和字符串 数位dp 计数问题

    LINK:小V和字符串 容易想到只有1个数相同的 才能有贡献. 知道两个01串 那么容易得到最小步数 大体上就是 第一个串的最前的1和第二个串最前的1进行匹配. 容易想到设f[i][j]表示 前i位1 ...

  10. SparkSQL & Spark on Hive & Hive on Spark

    刚开始接触Spark被Hive在Spark中的作用搞得云里雾里,这里简要介绍下,备忘. 参考:https://blog.csdn.net/zuochang_liu/article/details/82 ...