美文网首页
Vue 如何优雅的根据条件动态显示组件

Vue 如何优雅的根据条件动态显示组件

作者: leslie1943 | 来源:发表于2019-08-09 15:55 被阅读0次

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

<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 如何优雅的根据条件动态显示组件

    ❓❓❓ 常规情况下,在里动态加载不同组件的方式为: 这种方式的问题,就是...

  • temp

    vue中,根据屏幕不同设置子组件的高度,ref、$refs、props vue组件页面高度根据屏幕大小自适应 vu...

  • vue优雅使用技巧(一)

    vue优雅使用 1. 高频组件全局引入 使用Vue.use()方法弊端: 需要多次import 引入组件 使用re...

  • React开发——权限组件开发

    React 开发中中经常根据角色配置菜单和权限按钮情况,为了开发的便捷,封装一个组件,根据权限动态显示。主要实现功...

  • React拓展7-renderProps插槽

    类似Vue的插槽,在组件的指定地方预留一个位置,根据需求存放组件,且可以携带参数。 如何向组件内部动态传入带内容的...

  • computed与watch的区别

    computedomputed 是计算属性,它会根据你所依赖的数据动态显示新的计算结果计算属性将被加入到 Vue ...

  • VUE开发--Vuetify组件(二十五)

    一、Vuetify组件 &emps;&emps;一个vue ui库,提供vue组件供使用。根据 Google Ma...

  • 第二天_vue基础语法_Vue.js2.0+Node+ES6+M

    模板语法 class和style绑定 条件渲染 vue事件处理器 vue组件

  • vue

    1、什么是组件化、有什么好处、vue如何创建组件、vue组件之间如何通信 什么是组件化。任何一个页面我们都可以抽象...

  • vue组件使用

    组件 vue支持自定义组件,用户可以根据自己的需求封装一个公共的组件,实现组件的复用。 一个单独的vue文件就是一...

网友评论

      本文标题:Vue 如何优雅的根据条件动态显示组件

      本文链接:https://www.haomeiwen.com/subject/ozshjctx.html