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