Vue.js--组件高级用法--动态组件、异步组件-蒲公英云

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

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

动态组件

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

<!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的值就可以动态挂载组件了。也可以直接绑定在组件对象上。

<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只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。

<!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>