当前位置: 首页>編程日記>正文

浅谈vue 动态加载、注册组件

浅谈vue 动态加载、注册组件

在大型项目中,vue组件是灵活复用的,需要从后台获取组件,加载注册渲染到页面,在项目遇到这个问题很久,没有得到解决,收集各方资料,整合一下

栗子:下面这个数组,我们是从后台获取到的数据,其中有component属性,这就是存在后台的组件名字,this.layout是一个随时变化的数组,开始并不知道 它有多少组件,没法实现提前注册,变需要使用动态加载注册;

this.layout=[{"x":0,"y":0,"w":6,"h":10,"id":"A0",component:"certificateSumLine"},{"x":0,"y":6,"w":6,"h":10,"i":"A1",component:"privateScoreTop"},{"x":0,"y":12,"w":6,"h":10,"i":"A2",component:"certificateCountColumn"}]

注册方案

this.registerComponent(this.layout[index].component);

这里是一个遍历,上面只是其中语句,通过下面这个方法,实现组件加载和注册。

 /*** @desc 统一加载注册组件资源*/registerComponent(templateName){Vue.component(templateName,    require("./../dashComponent/"+templateName+".vue"));},

解析
require(),目前不支持传带有path的变量,所以只能传输组件名字,这也是其中局限性,需要把所有需要加载的组件放在一个目录下面,
也许可以参考一下
http://webpack.github.io/docs/api-in-modules.html#require-context
修改配置,谁有更好的可以分享分享


https://www.fengoutiyan.com/post/14535.html

相关文章:

  • vue懒加载原理
  • vue路由懒加载
  • vue加载远程组件
  • vue组件重新初始化
  • vue异步组件加载实现方式
  • vue怎么让组件重新加载
  • vue组件重新渲染
  • vue异步加载
  • 鏡像模式如何設置在哪,圖片鏡像操作
  • 什么軟件可以把圖片鏡像翻轉,C#圖片處理 解決左右鏡像相反(旋轉圖片)
  • 手機照片鏡像翻轉,C#圖像鏡像
  • 視頻鏡像翻轉軟件,python圖片鏡像翻轉_python中鏡像實現方法
  • 什么軟件可以把圖片鏡像翻轉,利用PS實現圖片的鏡像處理
  • 照片鏡像翻轉app,java實現圖片鏡像翻轉
  • 什么軟件可以把圖片鏡像翻轉,python圖片鏡像翻轉_python圖像處理之鏡像實現方法
  • matlab下載,matlab如何鏡像處理圖片,matlab實現圖像鏡像
  • 圖片鏡像翻轉,MATLAB:鏡像圖片
  • 鏡像翻轉圖片的軟件,圖像處理:實現圖片鏡像(基于python)
  • canvas可畫,JavaScript - canvas - 鏡像圖片
  • 圖片鏡像翻轉,UGUI優化:使用鏡像圖片
  • Codeforces,CodeForces 1253C
  • MySQL下載安裝,Mysql ERROR: 1253 解決方法
  • 勝利大逃亡英雄逃亡方案,HDU - 1253 勝利大逃亡 BFS
  • 大一c語言期末考試試題及答案匯總,電大計算機C語言1253,1253《C語言程序設計》電大期末精彩試題及其問題詳解
  • lu求解線性方程組,P1253 [yLOI2018] 扶蘇的問題 (線段樹)
  • c語言程序設計基礎題庫,1253號C語言程序設計試題,2016年1月試卷號1253C語言程序設計A.pdf
  • 信奧賽一本通官網,【信奧賽一本通】1253:抓住那頭牛(詳細代碼)
  • c語言程序設計1253,1253c語言程序設計a(2010年1月)
  • 勝利大逃亡英雄逃亡方案,BFS——1253 勝利大逃亡
  • 直流電壓測量模塊,IM1253B交直流電能計量模塊(艾銳達光電)
  • c語言程序設計第三版課后答案,【渝粵題庫】國家開放大學2021春1253C語言程序設計答案
  • 18轉換為二進制,1253. 將數字轉換為16進制
  • light-emitting diode,LightOJ-1253 Misere Nim
  • masterroyale魔改版,1253 Dungeon Master
  • codeformer官網中文版,codeforces.1253 B
  • c語言程序設計考研真題及答案,2020C語言程序設計1253,1253計算機科學與技術專業C語言程序設計A科目2020年09月國家開 放大學(中央廣播電視大學)
  • c語言程序設計基礎題庫,1253本科2016c語言程序設計試題,1253電大《C語言程序設計A》試題和答案200901
  • 肇事逃逸車輛無法聯系到車主怎么辦,1253尋找肇事司機