关于在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组件不会显示，且顺序也是按照数组顺序。具体实现效果还没验证，但应该在不久的以后。

巴特西

关于在vuejs中动态加载不确定数量和内容的组件的解决方案

最新文章

热门文章