vue中的component元素,vue 内置组件component

　　本文主要介绍了如何解决vue的组件标签渲染问题，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

component标签渲染问题

　　最近遇到一个问题，就是通过LoadJs方法加载的组件怎么通过component实现热加载问题

　　vue的组件标签是一个虚拟的dom，需要vue在真实的dom树上渲染显示。但是我最近遇到的问题是，我通过LoadJS的方法从项目A读取项目B的对象，页面已经以组件的形式渲染到项目A的页面，无法渲染。

　　我的第一反应是这样的。$forceUpdate()，我只是渲染了一下，但是没有效果。

　　于是一个问题浮现在脑海。VUE如何识别加载的虚拟DOM和路由中绑定的页面？导入对象和要求对象有什么区别，什么时候用？

　　我思考过这类问题。其实import和require的区别在很多文章里都有解释，而且解释的很好。个人觉得最大的区别就是一个是静态编译，一个是动态编译。也就是说，脚本在运行后被编译。

　　所以我这里要动态编译，因为外部Js文件是blob对象，不能根据import指定路径。在运行时，我访问相应的Js文件。就是当这个路径是虚拟的，找不到的时候，不要用导入。

vue如何识别import对象和require对象

　　Require是CommonJs的语法(AMD规范介绍)，CommonJs的模块是对象。导入es6是语法标准(浏览器不支持，本质是用node中的babel把es6转码成es5然后执行，导入会转码成require)。es6模块不是object require，而是一种在运行时加载整个模块(即模块中的所有方法)的方法，生成一个对象，然后从对象中读取(这个对象只能在运行时获取，不能在编译时是静态的)，理论上可以在代码的任何地方使用。在编译时调用import，确定模块的依赖关系，输入变量(es6模块不是对象，但是输出代码由export命令指定，然后通过import输入，只加载import中引导的方法，其他方法不加载)。导入有改进效果，会提升到模块头(编译时执行)。导出和导入可以位于模块中的任何位置，但它们必须位于模块的顶层。如果它们在其他范围内，将会报告一个错误。这解决了一个问题，但是组件的is属性可以标识require和import对象。我直接扔进去了，还是不行。

　　然后注意到一个点，VUE的生命周期！

　　然后我发现我其实就是mounted导入的对象。

　　提醒你自己和你看到的人，请不要在mounteds中使用require和import，我可以将其更改为created来执行该功能。理论上，也可以使用beforeCreated和beforeMounted。我没试过。

　　也提醒我，思考一个问题，不要跑题，换个思路，也许你会豁然开朗，就像我的问题一样。其实主要问题是导入对象的时间和导入方式的选择，而不是渲染。

component组件嵌套，导致页面重复渲染，重复请求的bug

　　因为详情页有好几个tab标签，考虑到页面在很多地方都是复用的，而且是由好几个页面组成的，所以最终决定用组件的方法来引用页面。

　　因为项目中使用的UI组件是element-ui，我只是看到了一个类似tab tab的样式，所以就采用了element的tabs组件，没想到问题出在这里。

错误代码

　　El-tabs class= header-tabs v-model= active name @ ta B- click= handle click

　　el选项卡窗格

　　v-for=选项卡项

　　:key=item.id

　　:label=item.label

　　:name=item.id

　　:component=item.component

　　懒惰的

　　保持活动排除=ContentManage

　　组件：is= current component :customer id= agency id /组件

　　/保持活力

　　/El-选项卡-窗格

　　/el-tabs

　　因为上面用的是tabs标签，还用了v-for循环(没办法，主要是标签页是动态的)，所以每个页面不仅没有办法缓存，反而不停的重复发送请求。我在百度了半天，终于求助不了了。在大佬们的远程帮助下，我终于发现是tab下的v-for造成的。

　　因为组件是在v-for循环中编写的，所以每个循环都会创建一个对象，从而导致许多组件的创建。点击一次tabs循环后，所有组件发送请求，每点击一次，请求就会减少一次(因为保活缓存的问题)。

　　最终的解决方案不是在element-ui的tabs组件中，而是自己写页面。反正风格不复杂。

正确代码

　　ul class=tabs-ul

　　里

　　当前标签中的v-for=(项目

　　:key=item.id

　　:class= { active:tab select===item . id }

　　@ click . prevent= change tabs(item . id)

　　/李

　　/ul

　　保持活动排除=ContentManage

　　组件：is= current component :customer id= agency id /组件

　　/保持活力

　　这样，您可以避免创建多个组件，从而避免重复发送请求的bug。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。