本文介绍了VUE定制构件模板的方法。分享给大家参考，如下：

先说需求，因为客户的用户基数比较大。如果需求发生变化，频繁更新的版本需要重新开发和重新发布，影响用户体验。考虑到这一层，认为页面显示效果可以动态匹配。当需求更新时，模板被重新配置并输入数据库，然后根据用户选择的模板显示。

至于页面显示的动态配置，我指的是vue的Component模式。在开始的时候，我可能会遇到组件被定义后无法加载的情况。在控制台中，出现以下错误：您正在使用模板编译器不可用的仅运行时版本的vue.对于解决方案，在下图文件中添加‘vue $’:‘vue/dist/vue . ESM . js’，具体原因可以百度确定。

开始时的代码：

1.代码的初始版本，这是为了测试一些想法的开始

模板div ai-panel : testData=' test data '/ai-panel/div/templatesciportdefault { data(){ return { testData 3360 { name : ' Li Si ' } } }，components 3360 {//自定义组件aipanel: {name:' aipanel '，模板： ' span { { testData . name } }/span '，prop 3360[' testData ']//可用作参数3://可以继续定义数据、方法等。子组件的。} }}/script通过测试发现有些地方无法自由控制。比如后台传来的html语句不能很好的放到子组件的模板中，然后根据vue api重新优化。

1.首先创建一个工具类的js文件，并在js中添加以下代码

从' vue'/导入vue导出函数导入Vue导出函数do components(opt){//调用opt时传入可以包含模板的html语句，数据中要绑定的数据等。let bill item=opt . bill item let bill html=opt . bill html；const my component=vue . extend({ template : bill html，data(){ return { billitem : billitem } }，Methods: {//子模板中的自定义事件} })/$ mount(id)手动挂载到页面newmycomponent()。$ mount ('# testtemplate')} 2。页面代码如下

模板div class=div '卡片主窗体'！- ai-btn是我的自定义按钮。Big brothers可以改为元素组件的按钮-ai-BTN title=' query ' icon=' El-icon-search ' lcss=' BTN-组织' @ onclick=' query '/div ref=' test template ' id=' test template '/div/templatescript import * as temp from ' @/API/my template '；//上面定义的js文件是export default { data(){ return { billitem : { name 3360 ' test ' }，billhtml 3360 ' div class=' org ' { billitem . name } }/div '，}，methods : { no response(){ alert()。);}，query:function () {this。$ http . post('/billing/qcdr/qrybilnfo ')。然后((res)={//如果后台界面有数据，可以从RES获取后台数据，我这里就直接用页面的测试数据。let option={ ' bill html ' : this . bill html，' billitem ' : this . billitem } temp . do组件(option)；//加载模板}，(错误)={ this。$message.error('系统正忙')；})} }}/script这样每个查询都可以根据后台返回的html重新生成页面，这样框架只需要构建一次。之后可以根据客户的需求重新配置模板，通过指定模板，将模板中的html保存到数据库中并显示出来。查询页面时，可以获取并显示相应的模板。

希望本文对vue.js程序的设计有所帮助。