Vue.js--组件高级用法--动态组件、异步组件

我就是我 2021-08-14 00:29 596阅读 0赞

动态组件

Vue.js提供了一个特殊的元素< component >用来动态地挂载不同的组件,使用is特性来选择要挂载的组件。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  8. <title>动态组件</title>
  9. </head>
  10. <body>
  11. <div id="app">
  12. <component :is="currentView"></component>
  13. <button @click="handleChangeView('A')">切换到A</button>
  14. <button @click="handleChangeView('B')">切换到B</button>
  15. <button @click="handleChangeView('C')">切换到C</button>
  16. </div>
  17. <script> var app = new Vue({ el: '#app', components: { comA: { template: '<div>组件A</div>' }, comB: { template: '<div>组件B</div>' }, comC: { template: '<div>组件C</div>' } }, data: { currentView: 'comA' }, methods: { handleChangeView: function (compnent) { this.currentView = "com" + compnent; } } }); </script>
  18. </body>
  19. </html>

在这里插入图片描述动态地改变currentView的值就可以动态挂载组件了。也可以直接绑定在组件对象上。

  1. <div id="app">
  2. <component :is="currentView"></component>
  3. </div>
  4. <script> var Home = { template: '<p>Welcome home!</p>' }; var app = new Vue({ el: '#app', data: { currentView: Home } }); </script>

异步组件

当工程足够大,使用的组件足够多时,是时候考虑下性能问题了,因为一开始把所有的组件都加载是没有必要的一笔开销。好在Vue.js允许将组件定义为一个工厂函数,动态地解析组件。Vue.js只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  8. <title>异步组件</title>
  9. </head>
  10. <body>
  11. <div id="app">
  12. <child-component></child-component>
  13. </div>
  14. <script> Vue.component('child-component',function (resolve, reject) { window.setTimeout(function () { resolve({ template: '<div>我是异步渲染的</div>' }); }, 2000); }); var app = new Vue({ el: '#app' }); </script>
  15. </body>
  16. </html>

工厂函数接收一个resolve回调,在收到从服务器下载的组件定义时调用。也可以调用reject(reason)指示加载失败。这里setTimeout只是为了演示异步,具体的下载逻辑可以自己决定,比如把组件配置写成一个对象配置,通过Ajax来请求,然后调用resolve传入配置选项。

发表评论

表情:
评论列表 (有 0 条评论,596人围观)

还没有评论,来说两句吧...

相关阅读