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>

2. 动态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的实现方式。