關於在vuejs中動態加載不確定數量和內容的組件的解決方案


在做一個門戶項目的時候,客戶要求需要進行私人化定制,每個人進入首頁的時候可以自定義首頁顯示的版塊

要在4.50個組件中顯示隨機N個組件按照每個人選定的順序排列。需求說完了,接下來說說解決方案:

 html:

<div id="app">
  <component :is="item" v-for="item in items" :key="item"></component>
</div>

 js:

const A = { template: '<div>A</div>' }
const B = { template: '<div>B</div>' }
const C = { template: '<div>C</div>' }
const D = { template: '<div>D</div>' }

new Vue({
      el: '#app',
      data: {
          items: [A,B,D]
      },
      components: {
          A, B, C, D, E
      }
})    

 齊活了,這樣就只會顯示A,B,D三個組件,而C組件不會顯示,且順序也是按照數組順序。具體實現效果還沒驗證,但應該在不久的以后。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM