vue的动态Template

vue的动态Template

对于前端工作的进行,我们在工作中大量使用了组件的开发思想,这样简化了我们的开发、提高了代码的复用、减轻了我们的维护或修改BUG的工作量、提高了团队开发的工作效率等多种优点。最近在开发过程中,使用到了动态引用模板(template)的功能,在查找了大量的资料和整理,完成了预想中的工作,这里记录一下实现过程并顺便记录一下动态组件的使用。

  1. 动态组件
    无论是Vue2还是Vue3,实现动态组件的步骤都可以是一样的(如果是Vue3,该页面请使用选项式API实现,组合式API本人没测试)
<template>
  <component :is="compName"></component>
</template>

<script>
  import CompA from '@/components/ComponentA'
  import CompB from '@/components/ComponentB'
  export default {
    // 无论组件是否被使用,该组件都需要注册在当前页面中
    components: {
      CompA,
      CompA
    }

    data() {
      return {
        compName: null
      }
    },

    created() {
      // 将组件名传递给 component 组件的 is 属性
      this.compName = 'CompA';
      // 可以通过修改 this.compName的值,实现动态切换显示组件 
    }
  }
</script>
  1. 动态template
    通过上面的步骤,我们已经可以实现动态的引入组件的功能,但是,这与我的要求是不一样的,我们需要的是从一个组态系统中,创建好页面的样式、插值,然后以json数据的形式将配置好的组态数据保存下来,上传另一个需要用到的项目中,然后将这些json数据作为vue组件的template,实现将页面渲染出来。如果我们一个json数据创建一个vue文件的话,可以使用上面的方式实现,然而,如果这样做,我们不得不每新增一个组态项目,在这个使用的项目中创建一个新的页面,不利于项目的可持续发展。这个时候,就用到了动态template的技术了。
    在贴出该代码前,我们需要首先配置一个我们的打包设置,否则可能会报运行时错误: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js"
    打开我的们打包配置文件添加别名
  // 对于vue3版本
  // 如果项目使用的vite构建,修改根目录vite.config.js,配置一下vue的别名
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js'
      // ... 其他别名
    }
  }
  // 如果项目使用的vue-cli进行构建,则修改根目录的vue.config.js,此时不需要添加别名,只需要添加一个配置即可
  module.exports = {
    runtimeCompiler: true
    // ... 其他配置
  }

  // 对于vue2,如果使用的webpack,开启运行时编译功能
  module.exports = {
    // 开启运行时编译
    runtimeCompiler: true,

    // 如果上面的配置添加后,仍不成功,添加下面的配置再行尝试
    configureWebpack:{
      // ... 其他配置
      resolve: {
        alias: {
          'vue$': 'vue/dist/vue.ems.js'
        }
      }
    }
  }

  // 对于roolup 需要在rollup.config.js中修改。注意,我目前没有测试过该类型的项目
  rollup({
    plugins: [
      alias:({
        'vue': require.resolve('vue/dist/vue.esm.js')
      })
    ]
  })

上面的配置是为了开启运行时编译的功能,正常情况下,是不开启的,在我们build项目后,我们的页面都已经打包成js文件,已经在js文件中生成了虚拟dom,只等我们访问页面后执行相关的代码即可,但是,template中的数据是在打包完成后的内容,尚未生成虚拟dom,是无法实现数据绑定的。下面的内容是实际实现渲染动态template的代码:

<template>
  <component :is="DynamicComp" info="123"></component>
</template>

<script>
  export default {
    components: {
      HelloComp: {
        template: `<h1>Hello world {{info}}</h1>`,
        props: ['info']
      }
    },

    data() {
      return {
        // 为DynamicComp赋需要展示的组件名
        DynamicComp: 'HelloComp'
      }
    }
  }
</script>

总结:无论是VUE2还是VUE3,我们的写法都是一致的,首先,使用component组件的is属性,指定该部分展示的组件。然后,在components选项中,注册一个用于展示模板的组件。最后将该组件名赋值给component的is属性。至于为什么VUE3版本使用选项式API,原因很简单————我做了很多的尝试,都失败了!如果后来发现了方法,会持续更新上来的,当然,很大可能是没这个时间或懒得去找这个方法了。最后,还是欢迎各位大佬帮忙在评论区留下使用组件式API的实现方式。

  • 9
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值