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

时间 2020-01-25 标签 vue.js vue 组件高级用法动态异步

动态组件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>动态组件</title>
</head>
<body>
    <div id="app">
        <component :is="currentView"></component>
        <button @click="handleChangeView('A')">切换到A</button>
        <button @click="handleChangeView('B')">切换到B</button>
        <button @click="handleChangeView('C')">切换到C</button>
    </div>
    <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>
</body>
</html>

动态地改变currentView的值就能够动态挂载组件了。也能够直接绑定在组件对象上。html

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

#### 异步组件
当工程足够大，使用的组件足够多时，是时候考虑下性能问题了，由于一开始把全部的组件都加载是没有必要的一笔开销。好在Vue.js容许将组件定义为一个工厂函数，动态地解析组件。Vue.js只在组件须要渲染时触发工厂函数，而且把结果缓存起来，用于后面的再次渲染。
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>异步组件</title>
</head>
<body>
    <div id="app">
        <child-component></child-component>
    </div>
    <script> Vue.component('child-component',function (resolve, reject) { window.setTimeout(function () { resolve({ template: '<div>我是异步渲染的</div>' }); }, 2000); }); var app = new Vue({ el: '#app' }); </script>
</body>
</html>

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